I'm trying this technique on a page. Used it before and it seemed to work fine, but now in Chrome and Firefox, no horizontal scroll bar is displayed (which is good) but horizontal scrolling still occurs on two-finger swiping (which is bad). I found this bug report which describes the same behavior, but is marked resolved. I tested in Safari, and horizontal scrolling was prevented.The code (virtually identical to the code from the CSS-Tricks example):\[code\]<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style>body {overflow-x: hidden;}h1 {position: relative;background: hsla(0,0%,0%,0.8);color: white;width: 90%;margin: 0 auto;}h1:before, h1:after {content: "";position: absolute;background: hsla(0,0%,0%,0.8);top: 0;bottom: 0;width: 9999px;}h1:before {right: 100%; }h1:after {left: 100%;}</style></head><body><h1>Title of Page with full browser width bars</h1></body></html>\[/code\]Any help greatly appreciated.EDIT: Adding in overflow-x to the html element does prevent horizontal scrolling, but sometimes leads to other display errors (on a more fleshed out page I made, a dropdown menu kept getting cut off, even though that should be an overflow-y thing) and doesn't explain why the scrollbar isn't there, but scrolling still works.
Overflow-x bug? Full browser width bars technique
- Thread starter zlatan25
- Start date