CSS overflow hidden property is not working on iOS

Question

I have a sidebar and when the button is pressed it goes in front of part of the main page. In order to prevent scrolling on the page in the back I use $("div").css('overflow','hidden') .

This solution works fine for any browsers on my computer however it does not work on iOS devices. I did not check other phones because I don't have any.

Any reason why it fails on iOS, although it is working pretty fine on computers?

Answer 1

For whatever reason, certain css rules need the graphics accelerator turned on in iOS and it will not do it automatically.

This rule will turn on the hardware acceleration for iOS:

-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);

Apply it only to elements you know will need it, using it excessively can have negative performance implications.