Flip not working on IE 11.0.24 on Windows 10, v1511

[sktnetwork]

The flip effect is working absolutely fine upto IE 11.0.22 in Windows 10 RTM 10240. But, after the November update of Windows 10, v1511, Build 10586, the effect is no longer working. Tested on many upgraded systems. Please check and fix / suggest patch.

[MateEke]

There is a problem in Microsoft Edge too.

[sktnetwork]

@MateEke, Nope, working totally fine in Edge on Windows 10 RTM 10240 and v1511, 10586.

[MateEke]

The tile disappearing in the middle of the animation, but still better than in IE.

https://onedrive.live.com/redir?resid=91DC0784642EB42F!217591&authkey=!AJ8P3fNMNgFJP1Q&ithint=video%2cmp4

[Download]

There are z-index properties that could cause this... Please have a look at the source... I would recommend experimenting a bit and telling us your findings.

The longer I'm working on this project, the more I begin to suspect that it is impossible to make a Flip script that works on all browsers without doing some tricks here and there based on in which browser we are running. So if you can find what is causing the problems, we can put in a feature-detect to get rid of the problematic code (or add some code) just for IE.

However I have no time to dive into this atm. We really need specific feedback. The best thing would be for you to fork this repo and create a Pull Request with your suggested changes. I'll promise to take the time to merge and release them if they are ok.

[Download]

@sktnetwork @MateEke

[sktnetwork]

@Download, here's how it looks on IE 11.0.24 on Windows 10 v1511. http://screencast-o-matic.com/watch/coXqijhFRU

Tried, but could not find out the real reason. Maybe someone can help. Works find on Edge.

[Download]

@sktnetwork Ok, the behaviour on IE11 is different from Edge. In Edge it looks better but also gives a weird flicker at the end of the animation.

Can you try with different versions of Flip? You can easily grab older versions from CDN by changing the version number in the URL. E.G.:

https://cdn.rawgit.com/nnattawat/flip/v1.0.18/dist/jquery.flip.min.js https://cdn.rawgit.com/nnattawat/flip/v1.0.17/dist/jquery.flip.min.js https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js https://cdn.rawgit.com/nnattawat/flip/v1.0.15/dist/jquery.flip.min.js https://cdn.rawgit.com/nnattawat/flip/v1.0.14/dist/jquery.flip.min.js

There have been some changes to the Flip behavior to fix other issues... One of these may have caused this. If we can find a version where it does work, we can look at the changes since then to narrow it down.

[sktnetwork]

@Download , I have found out the problem but don't know the solution.

1) First, I tried v1.0.1 to v1.0.18. None of them work in IE11.0.24+ on Windows 10 v1511. 2) Second, I commented out this line number 139: "backface-visibility": "hidden", to /*"backface-visibility": "hidden",*/

Doing this, it works half fine on IE11: Like this http://screencast-o-matic.com/watch/coXqjDhFSf

The only problem now is that the back view changes after all animations are loaded. What should be the fix for this now?

I hope this helps.

[Download]

The only problem now is that the back view changes after all animations are loaded.

Actually, that fixes the problem that is happening during the animation: The backface of the red side is showing during the turn and only after the turn completes is it hidden. The part where it is hidden after the animation is done with 'z-index'.

The backface-visibility rule is the one that is preventing the backface from showing, so given you disabled that rule the effect seen in the video is more or less what one would expect.

Flip uses three elements for it's card flip effect, Container, Front face and Back face. I would try to see if you can improve by setting the back-face rule only to the element that needs it to get rid of this issue.

I can't recommend much more than experimenting with the style rules to try to improve. If you do find a solution that makes it work in IE, we can then see if we can integrate that back into Flip.

[JemarJones]

Please try #43. I fixed an issue i was seeing in Edge there, but forgot to merge it.

[nnattawat]

https://github.com/nnattawat/flip/pull/43 has been merged

[pradeepjavac]

Still, I am facing this issue in IE. Flip effect is not working on any IE version in Windows 10.

Please fix this issue.

[Download]

@pradeepjavac Reopened, but please know that this project is run by volunteers who are not getting paid to do this. So if you need a quick fix, you'll have to put in some work yourself.

[craig-bartlett]

This may be related to a bug reported in certain IE 11 builds here

It may be worth trying the example code and marking as reproducible if it is, and hopefully MS will take notice.

[sktnetwork]

@Shinface, yes you're right. It's now IE 11.0.30 today, and the bug is still there. It's IE's and MS' fault but they are not going to fix it. In the bug report, MS has acknowledged the issue and is saying they won't fix it because it's fixed in Edge.

Sad state :(

[JemarJones]

@sktnetwork Can you link to that bug report please?

[sktnetwork]

@JemarJones Here it is: https://connect.microsoft.com/IE/Feedback/Details/2474735

[JemarJones]

@Download @nnattawat If Microsoft has more or less dropped support for IE, should we as well?

[Download]

That's what I did personally already. I don't bother testing my code for http://www.bridalapp.net on Internet Explorer anymore. I only occasionally test with Edge.

That being said, I did make an interesting discovery the other day that might end up being a fix for this issue...

I am working with React now and that doesn't mesh so well with jQuery, so when I needed a flip effect I couldn't turn to our beloved jQuery Flip. So I coded it by hand and had these flickering artifacts where the card faces would move 'through' each other. Then I discovered that I could get rid of them without resorting to the z-index declarations by using another z axis... The real 3D z-axis!

Currently, flip is doing this:

$dom.find($dom.data("front")).css({
  transform: rotateAxis + ($dom.data("reverse") ? "(-180deg)" : "(180deg)"),
  "z-index": "0"
});

$dom.find($dom.data("back")).css({
  transform: rotateAxis + "(0deg)",
  "z-index": "1"
});

But in my code for Bridal App, I am now doing this:

.mdl-card>.mdl-card__face.mdl-card__front {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.mdl-card>.mdl-card__face.mdl-card__back {
    -webkit-transform: rotateY(180deg) translateZ(1px);
    transform: rotateY(180deg) translateZ(1px);
}

.mdl-card.is-flipped>.mdl-card__face.mdl-card__front {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.mdl-card.is-flipped>.mdl-card__face.mdl-card__back {
    -webkit-transform: rotateY(0deg) translateZ(1px);
    transform: rotateY(0deg) translateZ(1px);
}

Note the translateZ(1px). This seems to work a lot better generally than the z-index.

EDIT: I tried this out with IE11 but it's not working. The entire card face disappears for a moment as it is turning. Drama. Ah well we can just wait it out, IE is fading pretty fast now that Edge is here.