Bug 146896

Summary: `display: block; width: 100%` makes <input type="range">'s thumb get clipped
Product: WebKit Reporter: Chris Rebert <webkit>
Component: CSSAssignee: alan <zalan>
Status: RESOLVED FIXED    
Severity: Normal CC: commit-queue, ddkilzer, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
URL: http://jsfiddle.net/cvrebert/0uzk6f4c/
Bug Depends on:    
Bug Blocks: 159753    
Attachments:
Description Flags
Screenshot of the rendering error
none
Patch
none
Patch none

Chris Rebert
Reported 2015-07-12 19:34:35 PDT
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" />
Attachments
Screenshot of the rendering error (5.15 KB, image/png)
2015-07-12 19:34 PDT, Chris Rebert 		no flags
Details
Patch (4.15 KB, patch)
2015-07-17 13:26 PDT, alan 		no flags
DetailsFormatted DiffDiff
Patch (4.11 KB, patch)
2015-07-17 13:40 PDT, alan 		no flags
DetailsFormatted DiffDiff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Chris Rebert
Comment 1 2015-07-12 19:38:21 PDT
(This is using Safari Version 8.0.7 (10600.7.12).)
Chris Rebert
Comment 2 2015-07-12 19:43:11 PDT
Filed a Radar for this: <rdar://problem/21787807>
Chris Rebert
Comment 3 2015-07-12 19:47:12 PDT
This bug also affects iOS 8.4.
Simon Fraser (smfr)
Comment 4 2015-07-13 09:10:52 PDT
Seems that any range slider over about 400px wide causes thumb clipping. The wider it is, the more the clipping.
alan
Comment 5 2015-07-13 11:34:52 PDT
RenderSliderContainer::layout() repositions the thumb box but does not issue repaint. Default display: inline works due to inline painting (see RenderBlockFlow::layoutBlock())
alan
Comment 6 2015-07-14 11:43:01 PDT
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(); }
alan
Comment 7 2015-07-17 13:26:54 PDT
Created attachment 256983 [details] Patch
Simon Fraser (smfr)
Comment 8 2015-07-17 13:31:24 PDT
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
alan
Comment 9 2015-07-17 13:40:13 PDT
Created attachment 256984 [details] Patch
WebKit Commit Bot
Comment 10 2015-07-17 20:47:38 PDT
Comment on attachment 256984 [details] Patch Clearing flags on attachment: 256984 Committed r186981: <http://trac.webkit.org/changeset/186981>
WebKit Commit Bot
Comment 11 2015-07-17 20:47:43 PDT
All reviewed patches have been landed. Closing bug.
Chris Rebert
Comment 12 2015-07-17 21:18:54 PDT
Thanks for the fix! I will remove the corresponding entry from http://getbootstrap.com/browser-bugs shortly.
alan
Comment 13 2015-07-17 22:15:18 PDT
(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!
alan
Comment 14 2015-07-17 22:17:26 PDT
(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)
Comment 15 2015-07-18 07:24:16 PDT
Tried to fix flaky test in r186994: <http://trac.webkit.org/r186994>
Note You need to log in before you can comment on or make changes to this bug.