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!

Enceladus

did you try -webkit-backface-visibility: hidden ? – Pain

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

Birkle

It didnt seem to have any effect on the flickering. – Enceladus

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

Yes i will create it now – Enceladus

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! – Adrell

Answer 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

Adamok

What did you add :before to? – Xenophobe

Answer 3

I had an image inside a div that was being transformed (react-zoom-pan-pinch) somehow setting -webkit-transform:translate3d(0,0,0); on the image itself and not on the div helped even though the image is not transformed. Also had to add z-index: -1 to keep it behind other elements after that.

Lethia

Answer 4

I tried with adding -webkit-perspective: 0; to elements(my case svg tag causing issue) parent tag fixes my issue.

Rhombohedron

Answer 5

I was animating simple div transforms using keyframes and only one of the div were flickering on Safari.

None of the solutions provided here worked for me.
This is how I fixed it.

On the div that has animation add this CSS:

transform-style: preserve-3d;
perspective: 300px;

And, add translateZ(1px) to the keyframe transforms too. Like:

@keyframes {
  0% { transform: translateX(-50%) translateY(-20%) translateZ(1px); }
  1000% { transform: translateX(-50%) translateY(-100%) translateZ(1px); }
}

EDIT: Just realised that I do not even have to add transform-style and perspective. It just works with translateZ(1px) in keyframes.

Pelag