Safari - CSS transform 3d rotation glitch

css safari 3d rotation visual-glitch
Uknowho picture Uknowho · Mar 28, 2017 · Viewed 8.6k times · Source

I have a div inside a a container div. The inner div html consists of a single character and I am trying to make the div flip with a 180 degrees 3d rotation. The effect works fine in all browsers but Safari. On Safari when the inner div gets rotated only half character gets rendered like it's split in a half. It's not quite a flicker, it's just like half of the character disappears behind a plane that's not really there. As per other answers on the same topic I applyed the backface-visibilty:hidden and transform-style:preserve-3d rules to my code, but to no avail.

.inner{
    height: 80%;
    width: 80%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    font-family: Arial;
    font-size: 5em;
    font-weight: bolder;
    color: #7CC7EE;
    -ms-perspective: 800px;
    -webkit-perspective: 800px;
    perspective: 800px;
    -ms-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -ms-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
}

.flip{
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -transform: rotateY(180deg);
}

I add and remove the .flip class via js to trigger the transition. Here's a slightly simplified situation of what I'm currently dealing with: https://jsfiddle.net/sb4usrs1/5/

If you click a div you can see its transition would be rendered fine but the below div would flicker -maybe that's a clue pointing to the cause?- In my actual scenario I have several of those divs flipping at the same time so it's a little more evident and confusing than this.

Answer

Uknowho picture Uknowho · Mar 29, 2017

Apparently there's a problem with the rotating div intersecting the plane of the parent div. This answer: Bug in CSS3 rotateY transition on Safari? shed some light on the issue. I solved by setting the z-index=1 to the flipping div.

Related questions

How to remove the border highlight on an input text element

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right. <…

Read More
is there a css hack for safari only NOT chrome?

im trying to find a css hack for just safari NOT chrome, i know these are both webkit browsers but im having problems with div alignments in chrome and safari, each displays differently. i have been trying to use this …

Read More
How can I force WebKit to redraw/repaint to propagate style changes?

I have some trivial JavaScript to effect a style change: sel = document.getElementById('my_id'); sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected'); return false; This works fine with the latest versions of FF, Opera and IE, but …

Read More