TakTakTak TakTakTak - 5 months ago 11x
Javascript Question

Getting Bootstrap Card to flip in Safari

Having a little trouble with my Bootstrap Card and making it flip in Safari, works in all other browsers fine, yet when it comes to Safari it seems that it doesn't want to play ball.

Here is my code: http://codepen.io/go6/pen/ONrBeR

As you can see its just a Card with two faces filled with content. Flips absolutely fine in Chrome etc.

I have tried playing around with the degrees at which it is rotated in safari, for example if you rotate it to 179 and 181 degrees you get to see half the card. However on 180degrees where it should be, it will appear for a brief second before disappearing again.

So I just want to ask if there anything specific I need to do to make this work in safari.

Thanks in advance!!


I think that's because of the background-color of the parent element .panel. When I remove the background-color from it and add it to .face, it's working for me.

Just imagine it like a transparent box (panel) you put another two (face, face-back) into it. Now you paint the back of the outer box (panel) and flip it around. Of course you can not see the containing boxes (face, face-back) anymore.

So to sum it up: the containing boxes (face) are behind its parents (panel) background. So leave the parent transparent and color the containing boxes instead.