CSS3 Transform affecting other elements with chrome/safari

css css-transitions flicker css-transforms
mfdeath picture mfdeath · Oct 10, 2012 · Viewed 13.1k times · Source

I have an issue where my css3 transformations are effecting other elements on the page and even causing them to sort of flicker. I saw another post about this but they didn't have a resolution with the issue.

http://scosha.mybigcommerce.com/w107b/ when you scroll over the navigation you see an animated css3 transformation. It works fine in firefox without flickering but with chrome and safari the effect is very obvious, you see it in the drop down menu items as well as the footer text.

Answer

zajc picture zajc · Nov 6, 2013

Working solution for flickering elements during transition in Chrome is to set up CSS for parent node:

-webkit-backface-visibility: hidden;

Related questions

Transitions on the CSS display property

I'm currently designing a CSS 'mega dropdown' menu - basically a regular CSS-only dropdown menu, but one that contains different types of content. At the moment, it appears that CSS 3 transitions don't apply to the 'display' property, i.e., you …

Read More
Using CSS for a fade-in effect on page load

Can CSS transitions be used to allow a text paragraph to fade-in on page load? I really like how it looked on http://dotmailapp.com/ and would love to use a similar effect using CSS. The domain has since been …

Read More
How can I transition height: 0; to height: auto; using CSS?

I am trying to make a <ul> slide down using CSS transitions. The <ul> starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, not …

Read More