3

I have a div with this css class:

.pos {
    -webkit-filter: brightness(0.5);
    -moz-filter: britghtness(0.5);
    -o-filter: brightness(0.5);
    -ms-filter: brightness(0.5);
    filter: brightness(0.5);
}

And on my iPhone it runs slow. If I remove those attributes everything goes fast. How can I use these attributes without slowing the page down?

DavideR
  • 570
  • 4
  • 18
  • CSS filter effects will impact performance for sure. In my projects, I use photoshoped images instead. – Raptor Jan 26 '14 at 12:20

1 Answers1

23

I found the solution here: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

It's about adding these proprieties:

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

Hope this will help!

DavideR
  • 570
  • 4
  • 18
  • 1
    that helped a lot! but still not 100% – Chet Dec 19 '14 at 08:38
  • 2
    August 2019 here, and we had the same issue on mobile iOS. Running 12.1.something, not the latest, but fairly new by todays standards. Had 3 or 4 floating elements over a thumbnail, with a filter drop-shadow. Safari would garble / distort the blocks. Adding the above properties fixed it 100% for us. Thanks! – anonymous-one Sep 05 '19 at 09:50
  • August 2020 here, same issue on mobile iOS 13.6.1. Had layout glitches / overlapping, seemingly caused by a grayscale filter on images. The above CSS fixed it. Really weird. Thanks so much! – Ffion Aug 27 '20 at 17:17