CODEWITHSUNDEEP
htmlcsssafaritransform
Ionut Bogdan
Ionut Bogdan

Reputation: 249

Safari CSS Transition flickering

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!

Upvotes: 5

Views: 16281

Answers (5)

Rehmat
Rehmat

Reputation: 2299

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.

Upvotes: 0

Dijo
Dijo

Reputation: 238

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

Upvotes: 0

Dev Nadine
Dev Nadine

Reputation: 11

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.

Upvotes: 1

Simon M.
Simon M.

Reputation: 2482

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

Upvotes: 6

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7248

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;

Upvotes: 10

Related Questions