Bug 146896 – `display: block; width: 100%` makes <input type="range">'s thumb get clipped

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Chris Rebert]

Created attachment 256684 [details]
Screenshot of the rendering error

Original Bootstrap issue: https://github.com/twbs/bootstrap/issues/16809

Setting `display: block; width: 100%` on an <input type="range"> causes the left or right part of the "thumb" of the input to get clipped when the user moves the "thumb".

Test case: http://jsfiddle.net/cvrebert/0uzk6f4c/

Steps to reproduce:
1. Open http://jsfiddle.net/cvrebert/0uzk6f4c/ in OS X Safari
2. Click on the range input's "thumb" and keep the mouse button depressed
3. Move the mouse to the left or right sufficiently so that the "thumb" changes its position along the range input's "track"
4. With the mouse button still depressed, move the pointer downward so that you can see the entire "thumb" unobscured

Expected behavior:
The range input's "thumb" should be drawn normally.
(In Safari's current UI, it should be a white/gray circle.)

Actual behavior:
The range input's "thumb" has its left or right edge clipped off.
See attached screenshot.

--------
Contents of the testcase (in the event that JS Fiddle goes offline):

CSS:
input[type="range"] {
    display: block;
    width: 100%;
}

HTML:
<input type="range" />

[Chris Rebert]

(This is using Safari Version 8.0.7 (10600.7.12).)

[Chris Rebert]

Filed a Radar for this:

<rdar://problem/21787807>

[Chris Rebert]

This bug also affects iOS 8.4.

[Simon Fraser (smfr)]

Seems that any range slider over about 400px wide causes thumb clipping. The wider it is, the more the clipping.

[zalan]

RenderSliderContainer::layout() repositions the thumb box but does not issue repaint. Default display: inline works due to inline painting (see RenderBlockFlow::layoutBlock())

[zalan]

we just need to issue a repaint for the thumb after we repositioned it.

diff --git a/Source/WebCore/html/shadow/SliderThumbElement.cpp b/Source/WebCore/html/shadow/SliderThumbElement.cpp
index 4bd22cc..0a1bb83 100644
--- a/Source/WebCore/html/shadow/SliderThumbElement.cpp
+++ b/Source/WebCore/html/shadow/SliderThumbElement.cpp
@@ -190,6 +190,7 @@ void RenderSliderContainer::layout()
     else
         thumbLocation.setX(thumbLocation.x() - offset);
     thumb->setLocation(thumbLocation);
+    thumb->repaint();
 }

[zalan]

Created attachment 256983 [details]
Patch

[Simon Fraser (smfr)]

Comment on attachment 256983 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=256983&action=review

> Source/WebCore/ChangeLog:3
> +        `display: block; width: 100%` makes <input type="range">'s thumb get clipped

icky backticks

[zalan]

Created attachment 256984 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 256984 [details]
Patch

Clearing flags on attachment: 256984

Committed r186981: <http://trac.webkit.org/changeset/186981>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Chris Rebert]

Thanks for the fix! I will remove the corresponding entry from http://getbootstrap.com/browser-bugs shortly.

[zalan]

(In reply to comment #12)
> Thanks for the fix! I will remove the corresponding entry from
> http://getbootstrap.com/browser-bugs shortly.
Thanks for filing the bug!

[zalan]

(In reply to comment #13)
> (In reply to comment #12)
> > Thanks for the fix! I will remove the corresponding entry from
> > http://getbootstrap.com/browser-bugs shortly.
> Thanks for filing the bug!
...report :)

[David Kilzer (:ddkilzer)]

Tried to fix flaky test in r186994:  <http://trac.webkit.org/r186994>