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!

did you try -webkit-backface-visibility: hidden ? – trainoasis Jul 29 '14 at 07:41 — trainoasis, Jul 29 '14 at 07:41

Alessandro Incarnati · Answer 1 · 2014-07-29T07:59:24.427

9

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;

edited Jul 29 '14 at 07:59

answered Jul 29 '14 at 07:41

Alessandro Incarnati

7,018
3
38
54

It didnt seem to have any effect on the flickering. – Ionut Bogdan Jul 29 '14 at 07:57
can you please create a js fiddle with it? Do you have the flickering on Chrome and Safari? – Alessandro Incarnati Jul 29 '14 at 07:57
Yes i will create it now – Ionut Bogdan Jul 29 '14 at 08:04
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! – Adam Hamilton Feb 26 '15 at 19:39

score 5 · Answer 2 · answered Jan 22 '20 at 09:12

5

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

answered Jan 22 '20 at 09:12

Simon M.

2,244
3
17
34

4

What did you add `:before` to? – Dan Overlander May 06 '20 at 16:28

score 0 · Answer 3 · answered Mar 21 '23 at 09:39

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.

score 0 · Answer 4 · answered Jun 15 '23 at 03:17

0

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

answered Jun 15 '23 at 03:17

Dijo

237
1
2
12

Safari CSS Transition flickering

4 Answers4

Linked