[Webkit-unassigned] [Bug 160622] New: Unable to set scrollLeft when -webkit-scrollbar {height: 0; }
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Fri Aug 5 17:32:09 PDT 2016
https://bugs.webkit.org/show_bug.cgi?id=160622
Bug ID: 160622
Summary: Unable to set scrollLeft when -webkit-scrollbar
{height: 0;}
Classification: Unclassified
Product: WebKit
Version: Safari 9
Hardware: All
OS: All
Status: NEW
Severity: Critical
Priority: P2
Component: CSS
Assignee: webkit-unassigned at lists.webkit.org
Reporter: sriramkrish85 at gmail.com
I am trying to hide the webkit scrollbar (i cannot use display: none or visibility: hidden due to - https://bugs.webkit.org/show_bug.cgi?id=160442)
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
http://jsbin.com/fiwiqo
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:
* https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md
* 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;
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20160806/99e6cefb/attachment-0001.html>
More information about the webkit-unassigned
mailing list