CSS3 Transform causing text to flicker in Safari and Firefox Mac Yosemite

css transform css-transitions css-transforms
Rick Doesburg picture Rick Doesburg · Jun 4, 2015 · Viewed 13.7k times · Source

I'm having this weird issue on Safari and Firefox (Mac/Yosemite) that causes almost all of the text on the page to flicker when hovering over the transforming element.

Example gif: (Firefox, Yosemite)

enter image description here

.usp {
   //USP has an icon that is defined below
    opacity: .4;
    @include transition(all .3s ease-in-out);


    &:hover { 
        opacity: 1;
        @include transition(all .3s ease-in-out);


        .icon {
            @include transform(scale(1.1));
            @include transition(all 1.7s ease-in-out);
        }
    } // :hover
} 

.usp .icon {
    display: block;
    height: 75px;
    width: 75px;
    // Insert background-image sprite (removed from this example)
    @include transition(all .3s ease-in-out); 
    @include transform(scale(1.0));
}

I've tried the following things:

Add every possible combination of these styles to the body, the transforming element and/or his parent

-webkit-transform-style:preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
 backface-visibility: hidden;
-webkit-filter: opacity(.9999);
-webkit-font-smoothing: antialiased;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke: 0.35px;

If (styles below) are applied to the body, the problem is fixed in Safari but not in Firefox as it is not a webkit browser.

-webkit-transform: translate3d(0, 0, 0);
-webkit-text-stroke: 0.35px;

I have literally no idea what causes this and how I can fix it!

Answer

Rick Doesburg picture Rick Doesburg · Jul 29, 2015

Alright!

After a week of testing, removing and adding CSS rules I finally found the solution that fixed my problem. I originally had this problem in both Firefox 39 and Safari 9 but Firefox mysteriously fixed itself with the latest update. Safari however, did not. The problem has to do with the 3D rendering of elements on the page. The element I tried to scale had to be transformed into 3D context, the flickering elements on the page switched between 2D and 3D as explained by @Woodrow-Barlow in the other answers.

By adding

-webkit-transform: translate3d(0, 0, 0);

to the flickering elements, and thus rendering them in 3D on page load, they no longer had to switch!

EDIT 1: For people who have this issue in other browsers, take a look at the CSS 'will-change' property: https://dev.opera.com/articles/css-will-change-property/

Related questions

CSS Transform causes flicker in Safari, but only when the browser is >= 2000px wide

You read that right. Tested on multiple machines in the office and the only difference between scenarios was browser size. A coworker narrowed it down to a 2000px sweet spot. Lo-and-behold when we each resize our browsers to be >= 2000…

Read More
when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I'm animating an element with a border

http://jsfiddle.net/nicktheandroid/5Ytnj/ When I add -webkit-backface-visibility: hidden; to the .circ element, it causes it to stay pixelated even after the animation is complete. I'm wondering if there's a way to get it to not pixelate while animating. …

Read More
Zooming on a point with CSS3 transform scale

Even if the following code snippet seems short, I struggled during days (shame on me!) to find a way to zoom on the point that is clicked using only CSS3 transform. It works now: The only problem is that the …

Read More