Linux Chrome breaks skeuocard

[Mab879]

When card is flipped on chrome 28 on Linux Mint it doesn't show the backside. Also, the inputs on the front side are still editable on the back side.

[kenkeiter]

Lol! Nice. I was having problems with this under Windows for a while, too. Had to apply specific CSS fixes for it.. I'll build up a Linux VM and get this fixed in 1.0.

[jarthod]

I just had the same issue (chromium). Quickly hacking from the console it seems related to z-index and rotation. Setting z-index to 2 on .skeuocard.js .card-body.flip .face.back seems to fix it.

[kenkeiter]

Interesting. Do you know if you have GPU compositing enabled?

[jarthod]

I think I do but now that I tried disabling / forcing composition in chromium, the skeuocard demo page is screwed and blinking xD But that's a linux/chromium/gpudriver issue I guess xD reopening/relaunching chrome doesn't help. I hope it'll be ok after a reboot xD BTW I also see the right part of the green fliping label even when it's should he hidden below the card. Probably the same kind of issue. I'm planning of using skeuocard for my project and as chromium is my main development browser i'll be happy to spend some time trying/helping to fix this issue ;)

[jarthod]

Got some news, I tried on my work machine (Ubuntu 12.04) with Chromium 28 and it's working perfectly. I have composition enabled. So I guess I didn't have composition at home.

I saw in your CSS a hack from chrome on windows which seems to match the problem, maybe it should also be enabled for linux ?

/* 
Fix for issue with Chrome in which no GPU acceleration will mess with 
backface visibility in 3d transforms
see: https://code.google.com/p/chromium/issues/detail?id=127844 
*/
.chrome.win .skeuocard {
  @media screen and (-webkit-transform-3d: 0) {
    .card-body .face{
      -webkit-transition-property: -webkit-transform, opacity;
      -webkit-transition-duration: 0.25s, 0;
      -webkit-transition-timing-function:ease-in-out,ease-in-out;
      -webkit-transition-delay:0, 0;
    }
    .card-body .face.back{
      opacity: 0;
    }
    .card-body.flip .face.front{
      -webkit-transform: rotateX(0deg) rotateY(-180deg);
      opacity: 0;
      z-index: -1;
    }
    .card-body.flip .face.back{
      opacity: 1;
    }
  }
}

[jarthod]

Ok I confirmed at home, chrome linux with GPU compositing works fine. The issue is present without GPU compositing. I tried enabling the windows chrome hack by removing the ".win" selector: It's better, the form is working, but the animation looks bad.

The back side is displayed at the very begining of the flipping animation. And it's the same the other way around, the front side is displayed at the very begining of the flipping animation.

If I understand your CSS correctly, the card faces should fade from one to another but this is not happening here. I'll try to find out why but i'm not a CSS guru xD

[jarthod]

Ok I've realized the opacity transition duration was set to 0s:

      -webkit-transition-property: -webkit-transform, opacity;
      -webkit-transition-duration: 0.25s, 0;

And by setting it to 0.25s, it's looking great !

      -webkit-transition-property: -webkit-transform, opacity;
      -webkit-transition-duration: 0.25s, 0.25s;

I don't know if this is causing any issue with windows but I think you can safely enable this hack for all OS (remove the .win) and change the opacity animation to 0.25s here is the final code:

.chrome .skeuocard {
  @media screen and (-webkit-transform-3d: 0) {
    .card-body .face{
      -webkit-transition-property: -webkit-transform, opacity;
      -webkit-transition-duration: 0.25s, 0.25s;
      -webkit-transition-timing-function:ease-in-out,ease-in-out;
      -webkit-transition-delay:0, 0;
    }
    .card-body .face.back{
      opacity: 0;
    }
    .card-body.flip .face.front{
      -webkit-transform: rotateX(0deg) rotateY(-180deg);
      opacity: 0;
      z-index: -1;
    }
    .card-body.flip .face.back{
      opacity: 1;
    }
  }
}