![]() These are all hacks, and will be replaced by the new CSS property will-change. There are a few other CSS properties that do the same thing, like translateZ(0) or translate3d(0,0,0). NOTE: only the hidden value will promote to a layer, not visible.Īlso, there are cases where this property can fix jagged edges around elements – all thanks to GPU rendering. 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. an animation over several layers, a scrolling div behind fixed elements, absolute over fixed with z-index. I am working in a Visual HTML creator, so the situations were I have flicker / artifacts are rather complex (ie. Also interestingly, in Chrome and Safari the side-effects are different, but boy there are! 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. Display:none visible flicker and artifacts.There's a nice, straighforward demo hereīut 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 have read and understand what really backface-visibility is for: It controls wether 3D rotated objects are visible when not facing the screen. 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.
0 Comments
Leave a Reply. |