Bug 160442

CSS Scroll Snap stops working if scrollbar is, somehow, hidden. I've tried to hide with "visibility:hidden", "opacity:0" and "display:none", all failing. I also had to refresh the browser to apply the scrollbar properties correctly. Sample code: https://codepen.io/romulof/pen/OXoNwY -------------------------------------------------------------------------------- HTML --------------------------------------------------------------------------- -------------------------------------------------------------------------------- <div class="main"> <h1> With scroll bars </h1> <div class="container"> <div class="child"><div class="label"><h1>1</h1></div></div> <div class="child"><div class="label"><h1>2</h1></div></div> <div class="child"><div class="label"><h1>3</h1></div></div> <div class="child"><div class="label"><h1>4</h1></div></div> </div> <h1> Without scroll bars </h1> <div class="container no-scroll-bar"> <div class="child"><div class="label"><h1>1</h1></div></div> <div class="child"><div class="label"><h1>2</h1></div></div> <div class="child"><div class="label"><h1>3</h1></div></div> <div class="child"><div class="label"><h1>4</h1></div></div> </div> </div> -------------------------------------------------------------------------------- SCSS --------------------------------------------------------------------------- -------------------------------------------------------------------------------- * { box-sizing: border-box; } .main { text-align: center; font-family: sans-serif; } .container { display: inline-block; width: 200px; height: 200px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; -webkit-scroll-snap-type: mandatory; &.no-scroll-bar::-webkit-scrollbar { display: none; } } .child { position: relative; display: inline-block; width: 100%; height: 100%; border: 1px solid black; background: #F0F0F0; -webkit-scroll-snap-coordinate: 0 0; } .label { width: 50%; height: 50%; border-radius: 25%; background-color: white; margin: 25%; h1 { font-size: 40px; margin: 50% 0 0 50%; transform: translate(-50%, 50%); } }