Search code examples
javascripthtmlcssreactjsz-index

Scrollbar renders above absolute positioned element for horizontally scrolling container beneath element

I'm working on a React application that includes a horizontally scrolling view and a popover on the same page. I noticed a bug when testing in Chrome, where the scrollbar of the horizontally scrolling view is rendering on top of the popover I've placed, despite the popover having an absolute position. I've narrowed down the problem to a simplified example. Here's a screenshot of the issue on Chrome:

Scrollbar rendering above popover for horizontally scrolling container beneath popover

I have tried the following:

  • Setting the container to have a relative position and adjusting the z indices of both the container and the popover.
  • Adjusting the overflow property on the container.

Here is a simplified HTML example I put together that demonstrates the issue.

<html>
<head>
    <style type="text/css">
        body {
            overflow: hidden;
            position: relative;
        }

        .container {
            width: 1000px;
            height: 50px;
            overflow: scroll;
            white-space: nowrap;
        }

        .popover {
            width: 200px;
            height: 200px;
            top: 0;
            left: 100px;
            background-color: teal;
            position: absolute;
        }
    </style>
</head>
<body>
<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="popover">
    Hi!
</div>

</body>
</html>

I have also put this into a JSFiddle.

I expected the scrollbar to render behind the popover. Instead, it renders on top of the popover.

I should note that the expected behavior occurs on Firefox. Both Chrome and Safari are exhibiting the issue. (I'm on a Mac.)

Does anyone know how to get the scrollbar to render behind the popover on Chrome and Safari? I would prefer a CSS solution, but as the original problem is occurring in a larger React application, I could also use some JavaScript to fix the issue.

Solution

  • I can't reproduce the bug on macOS Firefox, but can definitely reproduce it with macOS Chrome and Safari—it seems to be a webkit/blink rendering issue. One trick you can use is to force GPU compositing on the element: this can be done simply by using transform: translate3d(0,0,0);. See proof-of-concept example below:

    body {
  overflow: hidden;
  position: relative;
}

.container {
  background: yellow;
  width: 1000px;
  height: 50px;
  overflow: scroll;
  white-space: nowrap;
}

.popover {
  width: 200px;
  height: 200px;
  top: 0;
  left: 100px;
  background-color: teal;
  position: absolute;
  transform: translate3d(0,0,0);
}
    <div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="popover">
  Hi!
</div>