css3 transition(rotation) does not work properly in Chromium

Question

I'm trying to code flip transition animation in css3, but I get different results in Chromium and Firefox. Screenshots in Firefox:

normal: http://prntscr.com/2dx4rv
hover: http://prntscr.com/2dx58d

Chromium just flips the image. Literally:

normal: http://prntscr.com/2dx5o4
hover: http://prntscr.com/2dx6k4

Here's the markup:

<a href="page2.html">
        <div class="flip-wrap">
            <div class="flipper">
                <div class="front">
                    <img src="IMG_0003.JPG" class="akImg" />
                </div>
                <div class="back">
                    <h5>Lorem Ipsum</h5>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    </p>
                </div>
            </div>
        </div>
</a>

And the css:

.flip-wrap {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0px;
    left: 0px;
}

.akImg {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0px;
    left: 0px;
}

.flipper {position: relative;}

.front {position: absolute;top: 0%; left: 0%; z-index: 100; width: 100%; height: 100%;}
.back {position: absolute;top: 0%; left: 0%;
    background-color: blue}

.back p {margin-top: -10px; margin-left: 5px; font-size: 0.8em}
.back h5 {margin-top: 10px; margin-left: 5px;}

.flip-wrap {
    perspective: 1000;
    -webkit-perspective: 1000;
}

.flip-wrap:hover .flipper, .flip-wrap.hover .flipper {
    transition-delay: 0.2s;
    transform: rotateY(180deg);
    -webkit-transition-delay: 0.2s;
    -webkit-transform: rotateY(180deg);
}

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
}       

.front, .back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

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

Is there any way to achieve same effect in Chromium as in Firefox? I think I've prefixed everything with -webkit-, so that shouldn't be the problem(btw, isn't Chromium on Blink now? Still using -webkit?).

Tried to solve with: applying -webkit-backface-visibility: hidden to children of front and back(.front *, back *),
setting opacity to 0.99,
enabling Override software rendering list in flags
adding -webkit-transform: rotateY(0deg)

... bot none worked. Any more suggestions?

EDIT: possibly relevant, http://prntscr.com/2e4vhr. Here's the site: http://www.queness.com/resources/html/css3dflip/. As that's some kind of a tutorial, I don't expect it to have major errors in the code. Could this possibly be a webkit bug?

possible duplicate of [Webkit backface visibility not working](http://stackoverflow.com/questions/7455502/webkit-backface-visibility-not-working) — Carlo Cannas, Dec 25 '13 at 22:17
@CarloCannas I've tried everything from there, but nothing worked(updated the question) — Luke, Dec 26 '13 at 10:00
Have you tried to launch chromium with the `--ignore-gpu-blacklist` option? — Carlo Cannas, Dec 26 '13 at 13:18
@Carlo that's for what "Override software rendering list" is for, just the flag is persistent, if I got it right. Also, that is only the workaround, and I'm doing this for a site, and need better solution(the code above is just a snippet). — Luke, Dec 26 '13 at 18:45
Chromium on Linux has some problem for graphics acceleration. Check the chrome://gpu page to see if everything is right. I got your code working correctly on Ubuntu by running `chromium-browser --ignore-gpu-blacklist`. — Carlo Cannas, Dec 26 '13 at 18:47
Also, in chrome://gpu everything is Hardware Accelerated, and the only problem is: `Force compositing mode is off, either disabled at the command line or not supported by the current system.` — Luke, Dec 26 '13 at 19:27
That message is not a problem. If you still can't get it to work properly, and http://www.queness.com/resources/html/css3dflip/ doesn't work too, it's likely a driver problem. I tried with Chromium 31.0.1650.63-0ubuntu0.13.10.1~20131204.1 the example above and it is fine. — Carlo Cannas, Dec 26 '13 at 19:52

GL.awog · Answer 1 · 2013-12-26T13:49:15.557

I've noticed that it works fine for my Chromium, but in ie10/11 it has that mirror effect. I've also checked a couple of flip animation examples available on the net and all of them don't work right in ie10/11 they just flip vertically the front face div and don't show the back one.

i found that if i change the rotating container (instead of .flipper we rotate separately .face and .back) things go more cross-browser. http://fiddle.jshell.net/vPLZj/6/

so, here i assigned "transition" and "transition-style" to .front and .back instead of .flipper

.front, .back {
backface-visibility: hidden;
transition:  all 2s;
    transform-style:preserve-3d;
}

and on hover i rotate .front 180degrees and .back 360 degrees

.flip-wrap:hover .front {
    transform:rotateY(180deg);
}

.flip-wrap:hover .back  {
    transform:rotateY(360deg);
}

I also prefixed automatically all transi-properties.

Inspired by your solution I've found the 'correct' one(at least for me) and then stumbled upon even better(well, better written, result is the same) on GitHub. The key is in opacity, since webkit doesn't recognize backface-visibility in some random cases. — Luke, Dec 27 '13 at 20:38

Luke · Accepted Answer · 2017-09-04T17:16:20.490

After hours searching on Google, I've finally found an answer - not using backface-visibility at all.

Here's the code:

.back {
    -webkit-transform: rotateY(180deg);
}
/*
Flipping the '.flipper' is simple, just rotate it 180 degrees.
*/
.flipper {
-webkit-transform-style: preserve-3d;
-webkit-transition-property: all;
-webkit-transition-timing-function: linear;
}

.flipper:hover {
    -webkit-transform: rotateY(180deg); 
}
/*
Flipping the faces is not so simple when the browser doesn't support the
'-webkit-backface-visibility' property correctly! We have to fake it so
that the opacity of the '.face' changes such that, when it's at 90 degrees
rotation, the opacity is 0.

The transition from opacity 1 to 0, or vice-versa, is quick but delayed
in both directions for the face that is being revealed. In other words, as
the front face nears 90 degrees on its way to the back, it suddenly changes
its opacity. As the back face, coming from back to front, passes 90 degrees
it suddenly increases it opacity.
*/
.front {
-webkit-transition-property: opacity;
-webkit-transition-timing-function: linear;
}
.flipper:hover .back, .flipper .front { opacity: 1; }
.flipper:hover .front, .flipper .back { opacity: 0; }
 /*timings*/
.flipper { -webkit-transition-duration: 0.6s; } /* 100% */
.front { -webkit-transition-duration: 0.06s; } /* 10% */
.flipper:hover .back, .flipper .front { -webkit-transition-delay: 0.3s; } /* 50% */
.flipper:hover .front, .flipper .back { -webkit-transition-delay: 0.24s; } /* 40% */

Code taken(and adjusted just a bit to fit my markup&timing needs) from: https://gist.github.com/mattdenner/518776

css3 transition(rotation) does not work properly in Chromium

2 Answers2