Safari CSS Transition flickering

Question

I have a problem with a webpage I'm working on. On Firefox it doesn't seem to have any problems.

I have 2 elements, horizontal scrolling, with background images and the transition between those 2 is made using CSS3, transformX(). At first these 2 elements overlay (so that you can see the background image of the 2nd element), when you click the right arrow the second element slides from right to left in front. When you click right the first element slides from left to right

When I go back to the first element, the second element flickers, like rearranging its position.

.first-container.first-container1 {
    background: transparent url('../img/backgrounds/first1-background.jpg') no-repeat center center;
    background-size: cover;
    left: 0;
}
.first-container.first-container2 {
    background: transparent url('../img/backgrounds/first2-background.jpg') no-repeat center center;
    background-size: cover;
    left: 100%;
}


.bs-first .first1 .first-container.first-container2 {
    -webkit-transform: translateX(-8.5%);
    -moz-transform: translateX(-8.5%);
    -o-transform: translateX(-8.5%);
    -ms-transform: translateX(-8.5%);
    transform: translateX(-8.5%);
}

.first2 .first-container.first-container1 {
    -webkit-transform: translateX(8.5%);
    -moz-transform: translateX(8.5%);
    -o-transform: translateX(8.5%);
    -ms-transform: translateX(8.5%);
    transform: translateX(8.5%);
    z-index: 9;
}

I could really use a few hints on how i could solve this. Thank you!

Solution 1

You can try -webkit-backface-visibility: hidden; applied to the element that has applied the css transform.

In your case if you are using background images that it won't work so just create a class and apply it like:

.stop-flickering {-webkit-transform:translate3d(0,0,0);}

Also you can try:

-webkit-transform-style: preserve-3d;

Solution 2

In my case none of these methods worked :

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

-webkit-backface-visibility: hidden;

-webkit-transform-style: preserve-3d;

I had an animation on an empty div to create bouncing circle and the solution was to use pseudo element :before and the flicker disappeared

Comments

[Ionut Bogdan]

It didnt seem to have any effect on the flickering.

[Alessandro Incarnati]

can you please create a js fiddle with it? Do you have the flickering on Chrome and Safari?

[Ionut Bogdan]

Yes i will create it now

[Adam Hamilton]

I had this issue during/after a fade-in CSS transition (the font inside the transitioned element flickered and/or appeared to change in bold-ness) in Safari only and other solutions online weren't helping. The second solution here ( -webkit-transform:translate3d(0,0,0); ) solved the problem for me (although the font still seems to fade in a little slower than the rest of the element). Thanks, I never would have solved this!

[Dan Overlander]

What did you add :before to?