search

nnattawat / flip

A lightweight jQuery plugin to make 3D card flipping animation
Other
624 stars 312 forks source link

Chrome 45 backface visibility of inner elements #141

Open alex-droff opened 5 years ago

alex-droff commented 5 years ago

Hello, I'm using your really good plugin to flip cards (divs) with some inner elements (h2,div,a et cetera). After last issue of Chrome (45) all the inner elements became visible when flipped. I noticed that all of them take css "backface-visibility:hidden" by script. I do not know how, but chrome cancels this property when it's doubled in child element (???). So I litely changed your script in this line:

c.css(h).find(">*").css({"backface-visibility":"hidden","-webkit-backface-visibility":"hidden"})

I.E. I added '>' to select only direct descendant оf flipping element. And it works!

Thank you again for your script!

GISGuy commented 5 years ago

I noticed same issue here. @alex-droff Somehow your fix still applying the "backface-visibility" to certain grandchildren DOM in my case. So I changed following line faces.css(faceElementCss).find('*>').css({ "backface-visibility": "hidden" });

to

faces.css(faceElementCss).css({ "backface-visibility": "hidden" });

Thanks again for the tip

PhilippMatthes commented 5 years ago

Can confirm @GISGuy's solution. Works for me. @GISGuy can you open a PR?

cleanboy commented 5 years ago

Seconding @CISGuys solution works for me. Had to copy the plugin to a new file outside of node_modules to do this though as running npm update would break it again. Would love to know when this is fixed officially!

JonSaffron commented 3 years ago

Works for me.