[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