[Webkit-unassigned] [Bug 205624] New: Slider input with opacity clipping thumb shadow only on right side

Sat Dec 28 20:41:16 PST 2019

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

            Bug ID: 205624
           Summary: Slider input with opacity clipping thumb shadow only
                    on right side
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: All
                OS: All
            Status: NEW
          Severity: Minor
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: wrzimmerman at mac.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20191229/498eff6e/attachment-0001.htm>