Strange Z-Index Behavior with Scrollbars Under Chrome

Strange z-index behavior with scrollbars under Chrome

You may try to add -webkit-transform: translate3d(0, 0, 0). It solves my similar problem happened in mobile chrome.

Canvas with negative z-index issue on scroll in Chrome

This seems to be a Chromium/webkit (or blink) bug, and this fixes it, meeting all your criteria and no changes needed on the HTML structure or the rest of the styles:

ul {
    /* rest of the styles */
    -webkit-transform: translate3d(0,0,0);
}

Demo http://jsfiddle.net/3a66445w/2/

Very strange chrome bug with z-index and position:fixed

This should fix the issue:

As your header is using position: relative; z-index: 10;, give your container the following style:

.page-content {
      position: relative;
      z-index: 9;
}

This will make sure your header is always over your container.

Horizontal scrolling page weird behaviour on mobile chrome

So, after searching for few days, asking on few Facebook front-end groups, reddit and here I couldn't find any solution - I've decided to just use OwlCarousel2 and make each section a Owl item. It works like a charm.

I didn't wanted to do that, but it seems that there is a weird bug and nobody knows how to fix it.

How to prevent firefox scrollbars from overlapping all content

If you add 'transform: translate3d(0, 0, 0)' to the overflowing element, it should be fixed.

For example if you add the above css to the 'w3-responsive'-class here: https://www.w3schools.com/cssref/pr_pos_overflow.asp it won't happen anymore.

Chrome had the same issue.

Source:
Strange z-index behavior with scrollbars under Chrome

HTML5 Canvas & z-index issue in Google Chrome

I tested the same fiddle in Chrome 27/winXP and it behaves exactly as you describe; It looks like a bug in chrome or webkit for windows, I tested early with chrome 23/linux and it worked OK.

I found a workarround jsfiddle by warping both, the h1 and the canvas with a fixed div:

<div id='fixedContainter'>
    <h1>Test Title</h1>
    <canvas id="backgroundCanvas" width="956" height="256"></canvas>
</div>

The div should also have z-index:-10 if your intent is to make it a background.

CSS:

#fixedContainter{position: fixed; z-index: -10; }
h1{position: fixed;}
body{height: 2000px; }
canvas{ position: fixed; z-index: -10; }

​

---

Related Topics