search

nnattawat / flip

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

blurred when using scale #48

Closed nonaxanon closed 9 years ago

nonaxanon commented 9 years ago

maybe this is not an issue of this but if someone can help please, i have some divs scaled down to .75 and if i use this plugin, everything gets blurry, if i dont use it even though it is on .75 scale, everything will show crisp, any suggestions on what could i change on the plugin ?

JemarJones commented 9 years ago

Could we see an example?

JemarJones commented 9 years ago

It'd be easier to debug if an example was given in something like a jsfiddle.

nonaxanon commented 9 years ago

i cant beleive this took me so much time, man, heres one https://jsfiddle.net/ykahLph9/ and heres another https://jsfiddle.net/d7L3954L/ the last one, is not blurry, because it has the purejs selected, i really dont know what else could be wrong i beleive its on my end

nonaxanon commented 9 years ago

if i comment this line on your flipjs file,
faces.find('*').css({ //"backface-visibility": "hidden" });

i no longer have the blurry issue, but if i do that, the backfaces will still be visible , tried using style="backface-visibility: hidden;" but doesnt work

Download commented 9 years ago

Can you try with different versions of Flip? We are now at 1.0.16 so you could try with 1.0.15, 1.0.14 etc... We made some fixes recently but the code has become more complex too... If there is an older version that works correct for you it may help to pinpoint the issue.

nonaxanon commented 9 years ago

tried 1.0.16 to 13, 16 and 15 get blurry but wont show backfaces, 14 and the others will show backfaces but wont be blurry, the blurry problem is because i have everything transform scaled .75

nonaxanon commented 9 years ago 
      faces.find('*').css({
        "backface-visibility": "hidden"
      });

thats the only diference between .14 and .15, i really dont know why it causes blurry objects on chrome with this

nonaxanon commented 9 years ago

ok so i did this faces.find('*').css({ // "backface-visibility": "hidden" });

then , in the divs, i need it set up like so ,

div class="back" id="back" div class="oneclass" style="width:100%;height:100%;backface-visibility:hidden;"
div class="myclass" my stuff in here div div div

the "oneclass" has a background color similar to background page color, i noticed if i dont add that, the backface still will show even though back face visivility is hidden, with that i dont get blurryness anymore, thank you alll for your time

Download commented 9 years ago

Yeah unfortunately the state of CSS transforms cross-browser is still very unstable. There are lots of bugs and interpretation differences. I fear that our changes since .14 might be doing more harm then good (but they were in fact added as fixes to other issues).

Maybe the best thing would be to keep the basic setup very simple and only apply fixes to those browsers that need them. I'm having some issues with my own app that uses Flip as well, but finding solutions that work across the board is not easy. When I pickup those issues for my other app, I'll have a look at this and other issues and see if I can find a common fix.

For now I am closing this as it sounds like you are happy with the current solution. If not, please re-open.