Css3 Transform Causing Text to Flicker in Safari and Firefox MAC Yosemite

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

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/

If your slightly strange CSS code works on all browsers on Windows, will it work on Mac and Linux?

will it work on Mac and Linux?

Not necessarily.

Font rendering is the biggest issue with that sort of cross-platform. Some fonts that are available on Windows are not included in others by default and OSX has a very heavy font-rendering model (though Safari on Windows should show this - at least it used to).

General box models, padding, margins, et al should all be standard.

CSS3 Transform to reveal lower layer

Try appliying it when over is hovered and when background is hovered using the sibling selector ~

.over:hover, .background:hover ~ .over {
   transform: translateX(-200px);
   transition: all 0.3s ease-in-out 0s;
}

For more information on CSS selectors, this is a great and informative article

---

Related Topics