1

I found a similar problem here, but its suggestions didn't seem to work for me: Google Chrome - Flexbox + overflow-x:auto

So, my #triptychViewer div is a flex parent with two children, and the rightmost child seems to be a troublemaker. I've narrowed my whole site's code down to this, which still demonstrates the problem:

<html>

    <head>
        <style>
            div { overflow: hidden; }
            #triptychViewer { display: flex; height: 100vh; }
            .triptychMember { overflow: auto; width: 100vw; }
            #mainContent {height: 5000px; }
            #mainContent { background-color: green;}
            #updates { background-color: brown; }
        </style>
    </head>

    <body>
        <div data-role="page" id="wrapper" >
            <div id="triptychViewer">
                <div class="triptychMember">
                    <div id="mainContent"></div>
                </div>
                <div class="triptychMember" id="sidebar"></div>
            </div>
        </div>
    </body>

</html>

In Chrome 47, resizing the window horizontally makes the #sidebar div seemingly overlap the neighboring div's scrollbar (the one that appears because of its 5000px-high child). Resizing it vertically restores it to the way it should be, with a scrollbar that can be touched and clicked because it's not behind a div. Repeat the resizing as often as you like to see it happen repeatedly.

The problem doesn't appear in Firefox or IE. Is there a simple fix?

Community
  • 1
  • 1
Chris Morrow
  • 63
  • 7
  • On Chromium 45 it seems to behave exactly as on Firefox 44. – Oriol Oct 26 '15 at 23:06
  • By that, do you mean the scrollbar never goes away regardless of resizing? – Chris Morrow Oct 27 '15 at 12:36
  • After more searching, it looks like a variation on this problem, which remains unfixed after several years: [How can I force WebKit to redraw/repaint to propagate style changes?](http://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes) Just about all the suggested solutions work for me, although there are a lot of places in my original code that re-trigger the problem, so it's going to take work to find the best solution. – Chris Morrow Oct 27 '15 at 13:30
  • Addendum: Although the redraw bug seems to be a factor, this doesn't entirely explain it, because there's still no reason that a horizontal resize should have the effect it does... – Chris Morrow Oct 27 '15 at 17:11
  • I meant there are always two scrollbars: http://i.stack.imgur.com/220yn.png (one due to margin in body, probably you mean the other one). – Oriol Oct 27 '15 at 17:24

0 Answers0