I'd like to know why webkit-backface-visibility
is like that all-purpose aspirin that solves or makes worse all kinds of heterogeneous problems, mostly related to artifacts and flickering.
I have read and understand what really backface-visibility
is for: It controls wether 3D rotated objects are visible when not facing the screen. There's a nice, straighforward demo here
But I'm curious why, everytime I have strange glitches in the CSS world, totally unrelated to 3D rotations and their hidden backfaces, applying backface-visibility
to the problematic layer or one of its ancestors usually helps or make things worse, but rarely does nothing. I'm talking about things like
Interestingly and always in my humble experience, backface-visibility:hidden
tends to solve fixed-positioning related stuff, and backface-visibility:visible
is "best" for flickering. Also interestingly, in Chrome and Safari the side-effects are different, but boy there are!
I am working in a Visual HTML creator, so the situations were I have flicker / artifacts are rather complex (ie. an animation over several layers, a scrolling div behind fixed elements, absolute over fixed with z-index ....)
Anybody can enlighten me?
Underlying magicDescribe the technology, secret sauce or magic behind your product or service.
Ten slides. Ten is the optimal number of slides in a PowerPoint presentation because a normal human being cannot comprehend more than ten concepts in a meeting—and venture capitalists are very normal.
The title of your pitch deck is the first-moment potential investors get to see anything from your pitch. You have to make that moment count. A badly designed pitch deck title can immediately put investors on the wrong footing. In fact, it can completely derail your pitch.
I am not sure what kind of magic you are talking about, but there are certain cases where the CSS backface-visibility
property can help to promote a DOM element to a layer so that the browser can take advantage of GPU while rendering that element.
NOTE: only the hidden
value will promote to a layer, not visible
.
Also, there are cases where this property can fix jagged edges around elements – all thanks to GPU rendering.
There are a few other CSS properties that do the same thing, like translateZ(0)
or translate3d(0,0,0)
. These are all hacks, and will be replaced by the new CSS property will-change
.
If you are doing animations with CSS, the best option in terms of performance is to change only these 2 CSS properties: transform
and opacity
.
But as browsers are constantly changing, this may also change in the future. The goal is to make every CSS property as smooth as possible (ideally at 60FPS) while animating. I know that the Chrome team is working very hard on this, but not sure about other vendors.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With