Popup Flip-Transition places content under Video in Safari #4981

cschnell opened this Issue Sep 12, 2012 · 2 comments


None yet
3 participants

When using the flip transition to open a popup on a page that has a video included, the content of the popup is placed below the video. This happens only on safari for MacOS and iOS. Chrome, Firefox and others do not have this issue. Also, when using another transition, like pop, the problem does not happen.

here is a jsFiddle that shows the issue: http://jsfiddle.net/KsM8r/

Again, this only happens on Safari (MacOS and iOS) and only, if there is a video on the page.


jaspermdegroot commented Sep 17, 2012


Thanks for reporting the issue. I can confirm this, also on Safari for Windows.

There seems to be a problem with the stack order on Safari with certain transforms. I have seen similar issues being reported on the web. The only way I could work around the issue was adding translateZ to the animation, like so:

@-webkit-keyframes flipintoright {
    from { -webkit-transform: rotateY(90deg) scale(.9); }
    to { -webkit-transform: rotateY(0) translateZ(1px); }

With a value of 1px the popup will be in front of the video but the animation doesn't really good when used with a background overlay. When setting a value of 1000px this is solved, but then dialog/page transitions go crazy on Safari.
Whatever value is used, it didn't seem to have negative effects on Chrome.

We have to give this a good look and test thoroughly before making any changes.

@ghost ghost assigned jaspermdegroot May 7, 2013


apsdehal commented May 19, 2016

No longer an issue with latest jqm closing.

@apsdehal apsdehal closed this May 19, 2016

@apsdehal apsdehal self-assigned this Aug 3, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment