Menu
Transform is supported by all major browsers. See: caniuse.com/#search=transform. You would use the webkit prefix if you wanted to target Chrome and Safari specifically to make them do something else. Too easy mate.
The CSS -webkit-transform property enables web authors to transform an element in two-dimensional (2D) or three-dimensional (3D) space. For example, you can rotate elements, scale them, skew them, and more.
The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a <transform-function> data type.
I'm facing the same problem: I want to scale an element on hover, and when doing so every text on the page flickers. I'm also on latest Chrome (21.0.1180.89) and OSX Mountain Lion.
Actually, adding
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
to the affected elements does solve the problem.
You said you can't change the .in and .out classes, but maybe you can add another one (.no-flicker) and use it on the affected elements.
Note: This really does seem to help fix the problem in Chrome, but Note it might cause some issues in Safari if you have elements layered with z positioning CSS properties. For instance, on my site it is causing a CSS element to flicker behind the slide transitions of the animated slide show I am trying to clean up.
I have the same problem, but fix it.
Just add the .no-flickr class to any blinking or flickering element in your project
.no-flickr {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
I've had the same problem this morning and found that the best fix was:
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
I added this to each of the two elements that make up the faces of the two sided object. Stopped the flicker in Chrome and fixed the backface showing in Safari.
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