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%); } }
is this being worked on?
Huh, looks like <http://trac.webkit.org/changeset/209087> also fixed this issue. I'll add a LayoutTest covering this soon.
(In reply to comment #2) > Huh, looks like <http://trac.webkit.org/changeset/209087> also fixed this > issue. > I'll add a LayoutTest covering this soon. ^ I meant to write: <https://trac.webkit.org/changeset/209070>
<rdar://problem/23317034>
(In reply to comment #3) > (In reply to comment #2) > > Huh, looks like <http://trac.webkit.org/changeset/209087> also fixed this > > issue. > > I'll add a LayoutTest covering this soon. > > ^ I meant to write: <https://trac.webkit.org/changeset/209070> This is actually wrong. I tested this out in mainframe scroll snapping and saw that it worked when hiding scrollbars, but I tried again with overflow scrolling and found that it is still broken when hiding scrollbars. I figured it out after some investigation, and I'll have a patch up momentarily.
Created attachment 297668 [details] Patch
Created attachment 297672 [details] Patch for landing
Comment on attachment 297672 [details] Patch for landing Clearing flags on attachment: 297672 Committed r210117: <http://trac.webkit.org/changeset/210117>