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

i'm having weird issue on safari , firefox (mac/yosemite) causes of text on page flicker when hovering on transforming element.

example gif: (firefox, yosemite)

.usp {    //usp has icon 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 example)     @include transition(all .3s ease-in-out);      @include transform(scale(1.0)); } 

i've tried following things:

add every possible combination of these styles body, transforming element and/or 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) applied body, problem fixed in safari not in firefox not webkit browser.

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

i have literally no idea causes , how can fix it!

alright!

after week of testing, removing , adding css rules found solution fixed problem. had problem in both firefox 39 , safari 9 firefox mysteriously fixed latest update. safari however, did not. problem has 3d rendering of elements on page. element tried scale had transformed 3d context, flickering elements on page switched between 2d , 3d explained @woodrow-barlow in other answers.

by adding

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

to flickering elements, , rendering them in 3d on page load, no longer had switch!

edit 1: people have issue in other browsers, take @ css 'will-change' property: https://dev.opera.com/articles/css-will-change-property/