With "overflow: scroll", contents of back of flip card displays in front for Chrome, not other browsers

Question

I am developing a webpage on a Mac and have tested so far against Chrome, Safari, and Firefox.

The page uses the JQuery Flip plugin for a two-sided card with different content on each side. Since the content on the back side is variable length, I want to enclose it in a <div> tag with style="overflow: scroll;" or style="overflow: auto;".

When I display the page on the Chrome browser, the content from the back side appears in reverse on the front page, which of course I don't want. But this problem doesn't occur on the Safari and Firefox browsers.

Here's a fiddle illustrating the problem. Click the card to flip it. If you run the fiddle on Chrome, you'll see the back content (reversed) on the front side. If you run it on Safari and Firefox, it will work as desired.

I've written to the plugin's author for a possible solution (no answer yet), but I don't think it's so much a plugin issue as some inconsistency in how Chrome interprets the "overflow" style. I suspect that there's some CSS, perhaps associated with 3D effects, that I could use to make Chrome display the page correctly.

I'd appreciate any assistance you can offer.

PS

On David Walsh Blog, Walsh writes "A Note from CSS Animation Expert Ana Tudor: Applying certain properties with certain values (like overflow: hidden) on the card element would disallow it to have 3D transformed children." That might be a clue to why the effect doesn't work on Chrome, but doesn't explain why it works on Safari and Firefox. No solution seems to be offered, and I see no way to contact Walsh or Tudor.

Answer 1

That's an interesting bug, apparently only present on OS X. I'm not sure why having scrolling overflow is causing your issue, but I did find a simple hack.

Setting the backface-visibility to hidden on the scrolling element solves the problem. You can even use the inherit keyword in your case.

Working Example (JSFiddle):

#card .back > div {
    backface-visibility: inherit;
}

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.14/dist/jquery.flip.min.js"></script>
<script>
    $(function() {
        $("#card").flip({
            trigger: 'click'
        });
    });
</script>
<div id="card" style="width: 300px; height: 200px; margin: 10px;">
    <div class="front" style="border: 1px solid; padding: 10px;">
        Content for FRONT of card
    </div>
    <div class="back" style="border: 1px solid; padding: 10px;">
        <div style="height: 170px; overflow: scroll;">
            Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>Content for BACK of card
            <br>
        </div>
        <div style="margin-top: 10px;">Footer</div>
    </div>
</div>