Overflow hidden and child's backface visibility goes crazy

Question

The problem is that the 2nd article (.settings) should be rotated 360° and so its backface should be shown. (This even works if I delete the overflow in the .flip) The only thing I can see is the frontside flipped 180 on Y axis

Possibly a bug in chrome?

PS: Yes I want the 'Really long text node display?' see as it isn't turned at all.

HTML:

<article class="flip fliped anim" style="min-height: 308px;">

    <article class="settings fliped">
        "Text longer than 2nd article"
    </article>

    <article>
        ...
    </article>

</article>

CSS:

.flip article{
    overflow: hidden;
    -webkit-backface-visibility: hidden;
}

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

http://jsfiddle.net/LatpP/1/

score 3 · Accepted Answer · edited Mar 02 '17 at 13:39

3

i had a hard time fixing your code, i also found some duplicate properties, so i decided to rewrite it from scratch since i think i got what you want to achieve.

basically you dont need to go from 360 to 180 you can just go from 180 to 0 and if you need another rotation from 0 to -180 ;)
when you put the same class which has a 180deg rotation on parent and child divs like this:

<article class="flip fliped anim" style="min-height: 308px;">
<article class="settings fliped">

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

what you got is the sum of degrees, that is 360 which equals to 0! also you don't always have to specificate when a div is at 0deg since this is by default.

so here is the code i wrote, the animation triggers on hover (i commented the class involved in this).
i also added another wrapper to keep the perspective more realistic, if you dont like it just delete the very first class.
if you want to see the static backface only (as you asked) you just have to add the .hover class to the .flip-container div without messing with your css, like this:

<div class="flip-container hover" >

EDIT
i forgot about the overflow issue which is easily solved by applying the overflow:hidden; property directly to the last single container of your markup. in my case directly to .front or .back divs (or both). here is the final Fiddle updated for your needs.

edited Mar 02 '17 at 13:39

vsync

118,978
58
307
400

answered Apr 13 '13 at 02:27

Yenn

919
6
20

Well I really appreciate what you did it is awsome work (I would upvote if I could but I don't have enough reputation). But I can't change the article tag to the div tag since there is a bit of javascript. https://student.sps-prosek.cz/~eisead11it/web/Anketa/prihlaseni Login as Akxeone with password mnbvcx. The rotation is triggered by clicking on the small wheel. – Akxe Apr 13 '13 at 12:01
i saw your script and i don't think im going to rewrite that too... i would trigger this with a simple jquery like this `$(function() { $("#rotate").click(function() { $(".flip-container").toggleClass("hover"); }); }); ` here is the new fiddle http://jsfiddle.net/sFV22/4/. hope this helps – Yenn Apr 13 '13 at 15:17
Don't take me wrong, but you made the back flip 360° as well as I did since you turned the whole thing and then .back. My main problem is that when I add overflow hidden to the "flipper" div the thing goes crazy – Akxe Apr 13 '13 at 20:52
well you're actually right and i actually forgot about the overflow issue. just apply the `overflow:hidden;` directly to the to the div you want to apply it for example to `.front` or `.back` or both. Here is an updated Fiddle http://jsfiddle.net/sFV22/5/ i'm updating my answer also. – Yenn Apr 14 '13 at 13:16
And do you know why the backface-visibility:hidden disable itself if I set the main div overflow? Cause I you may see on my page there are no. Div or anythink I could set the owerflow. (Look on it with debugger and watch carefuly what happends to tags) I like the animation that come with it but I would love to not see the overflow over the parent. – Akxe Apr 14 '13 at 19:45
have you tried to set `overflow:hidden;` to your `.settings` class? i don't really know why backface-visibility is behaving like that, but after a brief research i came across some discussions with problems similars to yours involving this property. [here](http://stackoverflow.com/questions/7455502/webkit-backface-visibility-not-working?rq=1) and [here](http://stackoverflow.com/questions/11378517/css-animation-wont-work-with-overflow-hidden) this one seems to be more similar to your issue and applies my solution as well – Yenn Apr 14 '13 at 23:09
Yes I tried but since it is the div who makes the card to resize it doesn't really works. But screw it, I have a really nice problem now again I found that half of the backface react to click and the other don't. (try clicking inputs on there) any ideas? – Akxe Apr 15 '13 at 15:48

Overflow hidden and child's backface visibility goes crazy

1 Answers1