<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - CSS Scroll Snap does not work if scrollbar is hidden"
href="https://bugs.webkit.org/show_bug.cgi?id=160442">160442</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>CSS Scroll Snap does not work if scrollbar is hidden
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>OS X 10.11
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>romulo.fernandes@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>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:
<a href="https://codepen.io/romulof/pen/OXoNwY">https://codepen.io/romulof/pen/OXoNwY</a>
--------------------------------------------------------------------------------
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%);
}
}</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>