<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 - Unable to set scrollLeft when -webkit-scrollbar {height: 0;}"
href="https://bugs.webkit.org/show_bug.cgi?id=160622">160622</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Unable to set scrollLeft when -webkit-scrollbar {height: 0;}
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>All
</td>
</tr>
<tr>
<th>OS</th>
<td>All
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Critical
</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>sriramkrish85@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>I am trying to hide the webkit scrollbar (i cannot use display: none or visibility: hidden due to - <a class="bz_bug_link
bz_status_NEW "
title="NEW - CSS Scroll Snap does not work if scrollbar is hidden"
href="show_bug.cgi?id=160442">https://bugs.webkit.org/show_bug.cgi?id=160442</a>)
When i do something like
div#outer::-webkit-scrollbar {
height: 0px !important;
}
and then in JS do
outer.scrollLeft = inner1.offsetWidth;
The scrollLeft is being ignored (happens in safari and not on chrome)
(now this starts working fine when i set height: 0.1px)
Here is my JS BIN
<a href="http://jsbin.com/fiwiqo">http://jsbin.com/fiwiqo</a>
HTML
========
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"/>
<title>ScrollBar Safari bug</title>
</head>
<body>
<div id="container">
<div id="outer" class="outer">
<div class="start-marker"></div>
<div class="end-marker"></div>
<div id="inner1" class="inner">1</div>
<div id="inner2" class="inner">2</div>
<div id="inner3" class="inner">3</div>
</div>
</div>
<textarea id="log-el"></textarea>
</body>
</html>
CSS
=========
* {
padding: 0;
margin:0;
}
li {
list-style-type: none;
}
body {
background: orange;
}
/* AMP.CSS */
html, body {
overflow-x: hidden !important;
height: auto !important;
}
/**
* Margin:0 is currently needed for iOS viewer embeds.
* See:
* <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md">https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md</a>
* and {@link ViewportBindingNaturalIosEmbed_} for more info.
*/
body {
margin: 0 !important;
}
/* END AMP.CSS */
#container {
width: 100vw;
height: 300px;
position: absolute;
}
#outer {
background: red;
box-sizing: border-box;
display: flex !important;
flex-wrap: nowrap;
height: 100% !important;
left: 0;
overflow-x: auto !important;
overflow-y: hidden !important;
position: absolute !important;
top: 0;
white-space: nowrap !important;
width: 100% !important;
-webkit-overflow-scrolling: touch;
-webkit-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
}
.inner {
background: yellow;
border: solid 1px blue;
font-size: 200px;
display: flex !important;
align-items: center !important;
flex: 0 0 100% !important;
height: 100% !important;
justify-content: center !important;
position: relative !important;
-webkit-scroll-snap-coordinate: 0 0;
scroll-snap-coordinate: 0 0;
width: 100% !important;
}
.start-marker,
.end-marker {
background-color: transparent !important;
display: block !important;
flex: 0 0 1px !important;
height: 100% !important;
position: relative !important;
-webkit-scroll-snap-coordinate: 0 0;
scroll-snap-coordinate: 0 0;
width: 1px !important;
}
.start-marker {
order: -1 !important;
margin-left: -1px !important;
}
end-marker {
order: 100000000 !important;
margin-right: -1px !important;
}
/* Let's get this party started */
div#outer::-webkit-scrollbar {
height: 0px !important;
}
#log-el {
background-color: cyan;
display: block;
width: 100%;
height: 40vh;
margin-top: 310px;
}
JS
========
var startTime = new Date().getTime();
function log(m) {
var el = document.getElementById('log-el');
el.value = '[' + (new Date().getTime() - startTime) + '] ' + (m || '') + '\n'+ el.value;
}
outer.addEventListener('scroll', function(event) {
log('scroll left: '+ outer.scrollLeft);
});
outer.scrollLeft = inner1.offsetWidth;</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>