Bug 160442 - CSS Scroll Snap does not work if scrollbar is hidden
Summary: CSS Scroll Snap does not work if scrollbar is hidden
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac OS X 10.11
: P2 Normal
Assignee: Wenson Hsieh
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-08-01 21:15 PDT by Rômulo Fernandes
Modified: 2016-12-26 13:12 PST (History)
7 users (show)

See Also:


Attachments
Patch (7.23 KB, patch)
2016-12-22 13:23 PST, Wenson Hsieh
simon.fraser: review+
Details | Formatted Diff | Diff
Patch for landing (7.17 KB, patch)
2016-12-22 14:18 PST, Wenson Hsieh
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Rômulo Fernandes 2016-08-01 21:15:52 PDT
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%);
  }
}
Comment 1 Sriram Krishnan 2016-08-05 17:23:16 PDT
is this being worked on?
Comment 2 Wenson Hsieh 2016-12-06 10:30:32 PST
Huh, looks like <http://trac.webkit.org/changeset/209087> also fixed this issue.
I'll add a LayoutTest covering this soon.
Comment 3 Wenson Hsieh 2016-12-06 10:31:13 PST
(In reply to comment #2)
> Huh, looks like <http://trac.webkit.org/changeset/209087> also fixed this
> issue.
> I'll add a LayoutTest covering this soon.

^ I meant to write: <https://trac.webkit.org/changeset/209070>
Comment 4 Wenson Hsieh 2016-12-22 13:13:43 PST
<rdar://problem/23317034>
Comment 5 Wenson Hsieh 2016-12-22 13:16:37 PST
(In reply to comment #3)
> (In reply to comment #2)
> > Huh, looks like <http://trac.webkit.org/changeset/209087> also fixed this
> > issue.
> > I'll add a LayoutTest covering this soon.
> 
> ^ I meant to write: <https://trac.webkit.org/changeset/209070>

This is actually wrong. I tested this out in mainframe scroll snapping and saw that it worked when hiding scrollbars, but I tried again with overflow scrolling and found that it is still broken when hiding scrollbars. I figured it out after some investigation, and I'll have a patch up momentarily.
Comment 6 Wenson Hsieh 2016-12-22 13:23:09 PST
Created attachment 297668 [details]
Patch
Comment 7 Wenson Hsieh 2016-12-22 14:18:57 PST
Created attachment 297672 [details]
Patch for landing
Comment 8 WebKit Commit Bot 2016-12-22 14:56:14 PST
Comment on attachment 297672 [details]
Patch for landing

Clearing flags on attachment: 297672

Committed r210117: <http://trac.webkit.org/changeset/210117>