Ich habe dieses seltsame Problem in Safari und Firefox (Mac / Yosemite), das dazu führt, dass fast der gesamte Text auf der Seite flimmert, wenn Sie den Mauszeiger über das transformierende Element bewegen.

Beispiel gif: (Firefox, Yosemite)

.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));
}

Ich habe folgende Dinge ausprobiert:

ügen Sie dem Körper, dem transformierenden Element und / oder seinem übergeordneten Element jede mögliche Kombination dieser Stile hinz

-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;

Wenn (Stile unten) auf den Text angewendet werden, ist das Problem in Safari behoben, jedoch nicht in Firefox, da es sich nicht um einen Webkit-Browser handelt.

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

Ich habe buchstäblich keine Ahnung, was dies verursacht und wie ich es beheben kann!