![]() This is worth checking out as well: fast-animation-with-ios-webkit This will help you see whats being rendered and by that choose what to put in hardware acceleration and what to leave out. ![]() Choose Drawing/Compositing flags > Show Compositing borders. Write 'defaults write IncludeInternalDebugMenu -bool true' in the terminal.Īfter this a Debug menu will show up. But for starters I suggest you turn on debug mode in safari. Its hard to help you debug this without any code. ![]() "I encountered glitchy behaviour when applying hardware acceleration to parts of the page that were already accelerated" Move the animating element outside of the parent the flickering See EDIT4 for the answer to why 2000px is a magic number.Īdd -webkit-transform-style: preserve-3d to the elements that areĪdd -webkit-backface-visibility: hidden to the elements that are Remember, Safari has to be set to at least 2000px wide for this to happen. Here is a bit of code in a jsFiddle that should reproduce the issue: Reason being that we use -webkit-font-smoothing: subpixel-antialiased liberally throughout the site and using any of these tricks trumps that property for the entire page, turning on antialiasing / grayscale for all text.ĮDIT - Okay, sorry for not having done this earlier. NOTE 2 - My question here is really around what exactly happens in Safari at 2000px, not necessarily how to fix the flicker with backface-visibility or translateZ or the like. NOTE - I can't really share screenshots/video/links as this site isn't yet public, and code is relatively unnecessary as this seems to be more of a browser issue than anything. Inversely, if you resize the browser to be < 2000px wide and mouse over that same element no flickering occurs.Īnyone else seen this bizarre behavior? Why is 2000px a magic number, and what exactly happens at 2000px? Lo-and-behold when we each resize our browsers to be >= 2000px wide and mouse over an element with a transform animation various elements on the page - specifically any element with a CSS gradient background - will flicker. A coworker narrowed it down to a 2000px sweet spot. Tested on multiple machines in the office and the only difference between scenarios was browser size.
0 Comments
Leave a Reply. |