NEW205624
Slider input with opacity clipping thumb shadow only on right side 
https://bugs.webkit.org/show_bug.cgi?id=205624
Summary Slider input with opacity clipping thumb shadow only on right side
Ryan Z
Reported 2019-12-28 20:41:16 PST
If a styled range input has opacity, any shadow set on the slider thumb will be cut off, but only on the far right side of the slider. Here's a minimal example to reproduce the issue, if you load this html and slide the range input thumb all the way to the maximum value (to the right), the blue shadow will be cut off. If you remove the `opacity: 0.9`, then the thumb shadow will be displayed normally in all positions (as it should be). <html> <style> body {display: flex;} input { -webkit-appearance: none; margin: auto; width: 500px; height: 15px; background: dimgray; opacity: 0.9; /* remove this line to fix */ } input::-webkit-slider-thumb { -webkit-appearance: none; width: 50px; height: 50px; background: black; border-radius: 50%; box-shadow: 0px 0px 0px 15px rgba(0, 0, 255, .75); } </style> <body> <input type="range"> </body> </html> Expected behavior: the shadow should not be cut off at maximum, just like it is not cut off when the range input is at 0. Other browsers I tested work this way. Tested with r253929, Safari Technology Preview, and iOS Safari
Attachments
Test case (483 bytes, text/html)
2020-01-02 11:55 PST, Simon Fraser (smfr) 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2019-12-29 19:33:29 PST
<rdar://problem/58235534>
Simon Fraser (smfr)
Comment 2 2020-01-02 11:55:48 PST
Created attachment 386614 [details] Test case
Ahmad Saleem
Comment 3 2023-09-21 09:43:36 PDT
I am able to reproduce this bug in Safari Technology Preview 179 using attached test case and scrolling to 'right' end will make 'knob' / 'thumb' clipped / cut-off.
Note You need to log in before you can comment on or make changes to this bug.