Royalslider in jQuery Flip tile -- backface visibility trouble

kwondra34's Avatar

kwondra34

28 Dec, 2019 09:12 PM

Hi again Dmitry!

I am working on a rather unique website/webapp where the Royalslider (basic tabs view -- copied code from main demo at http://help.dimsemenov.com/discussions/problems/313-the-new-royalslider-version) must be displayed inside a jQuery Flip front tile.

Displaying the Royalslider as the front tile works fine but as soon as I flip the tile to reveal the contents on the other side, the Royalslider (inverted) bleeds through. See the attached screenshot for an illustration. In order to flip the tile, just clicking ANYWHERE on the front (royalslider) and it will flip. In order to flip it back, you'll need to click on the RED background text.

From what I've read, I believe this has to do with the backface-visibility CSS property but I'm not certain.

To make certain that the issue wasn't from my main project, I started with a blank HTML doc, added Royalslider (code attached), added the jQuery Flip plugin, and put the Royalslider instance (#homeslider) inside the front tile.

For jQuery Flip, I didn't do any customization -- just strictly followed the front/back example here: https://nnattawat.github.io/flip/

Any help is greatly appreciated -- I am very excited about this project.

Thank you so very much!

-Kurt

Edit: I am seeing this issue on macOS Chrome and Safari but have not tested on Windows or other browsers. Focused solely on non-mobile for the time being.

  1. Support Staff 1 Posted by Dmitry Semenov on 30 Dec, 2019 05:55 PM

    Dmitry Semenov's Avatar

    Hello,

    The slider itself already uses 3d transforms, and browsers aren't very good at nesting them, so you might get issues like this.

    I'm not sure if there is a way of fixing this, since it's pure browser rendering issue. Consider using very simple tabs script without transitions and animations.

  2. 2 Posted by kwondra34 on 30 Dec, 2019 08:27 PM

    kwondra34's Avatar

    Hi Dmitry,

    Thanks for getting back to me. That's hard to hear :( -- I had some a nice plan in mind.

    Do you think a workaround to achieve the same effect would be to flip the tile, let the flip animation complete and then move the element to hidden/none. Then bring the other side in with a show? Just the normal hide/show of an element in place but with the flip affect? I know this is a bit outside of the scope of Royalslider so I understand if you cannot help now. Ouch though!

  3. Support Staff 3 Posted by Dmitry Semenov on 30 Dec, 2019 09:20 PM

    Dmitry Semenov's Avatar

    Well, I'm not sure what are your final goals, but you can flip the image itself within slides (rather than whole slider). And you don't even need third-party jquery libraries for it.

    This can be done just via CSS, there are quite a few tutorials online, for example https://davidwalsh.name/demo/css-flip.php

  4. 4 Posted by kwondra34 on 30 Dec, 2019 10:25 PM

    kwondra34's Avatar

    Thanks, Dmitry. I'm actually not using images at all but just raw text and a transparent background. See attached for my actual project. I am able to get things working the way I had hoped by setting *transform-style: unset;* (instead of preserve-3d) on the front tile while the back tile is active. The reason I thought this might be a bug (not in royalslider though) is because Chrome acts differently than other browsers.

    Perhaps seeing my actual project will make it clear if forcing transform-style: unset is the appropriate way to address this. Haven't tested on mobile or other browsers yet.

    Curious to hear your thoughts. Many thanks!

  5. Support Staff 5 Posted by Dmitry Semenov on 02 Jan, 2020 09:54 PM

    Dmitry Semenov's Avatar

    Try adding z-index and/or will-change:transform to the element that you're trying to flip, it might put it on separate rendering layer and help with the issue.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • rs-jquery-flip-backface.zip 408 KB
  • rs-inside-jquery-flip-BACK-issue.png 1.46 MB
  • rs-inside-jquery-flip-FRONT-working.png 1.32 MB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac