'Understanding Compositing Layers Issues

I had some users reporting a bug in an app I am working on where keys on our HTML keyboard would disappear for them. After some initial debugging I noticed there was a 3d transform applied to the keys that was not actually functioning, but was causing my browser to create a new layer for each key on the keyboard (see screenshot below). Removing the animation removed the layers for me and seems to have fixed the issue for all of the users. From what I was able to understand from the users, most of them seemed to be on very recent browsers, but on older hardware. As an example one user was on an IPad Air 2, but their user-agent header indicated they were on the latest version of Safari. I used browser stack to try and replicate the issue using the same major version of Safari (I could not get an exact version match) on a newer Ipad, everything seemed to work fine.

Chrome Layers Debug

I know there is not enough information here for someone to give a definitive answer, but I had always thought that knowing the browser version was enough to replicate a CSS bug like this. That does not appear to be the case here. Could an animation bug like this be caused by a user's specific GPU or OS version?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source