[Webkit-unassigned] [Bug 160442] New: CSS Scroll Snap does not work if scrollbar is hidden

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=160442

            Bug ID: 160442
           Summary: CSS Scroll Snap does not work if scrollbar is hidden
    Classification: Unclassified
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Macintosh
                OS: OS X 10.11
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: romulo.fernandes at gmail.com

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%);
  }
}

-- 
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/20160802/7dcbb202/attachment-0001.html>