[Webkit-unassigned] [Bug 209930] New: Inset box-shadow rendering bug on Safari iOS 13.4

[bugzilla-daemon at webkit.org]

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

            Bug ID: 209930
           Summary: Inset box-shadow rendering bug on Safari iOS 13.4
           Product: WebKit
           Version: Safari 13
          Hardware: iPhone / iPad
                OS: iOS 13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: andrea.verlicchi at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 395301

  --> https://bugs.webkit.org/attachment.cgi?id=395301&action=review

Rendering bug on iOS 13.4

Read my post on medium with the attached DEMO on CODEPEN:
https://medium.com/@andrea.verlicchi/inset-box-shadow-rendering-bug-on-safari-ios-13-4-6bf4256a1ee0

This is the content:

Some of my workmates updated their iPhones to iOS 13.4 and they found that Apple introduced a bug in the rendering of boxes with specific CSS rules for box-shadow . We had found the problem on some of our websites, then we created a new Codepen to isolate and identify the problem.

TL;DR: The rendering problem happens when you use a box-shadow rule with an inset value and a large negative spread-radius.

The spread-radius is the fourth length value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0, so the shadow will be the same size as the element. (source: MDN)

Firstly, we created an empty div on Codepen, applied it a size, a background color, and an inset box-shadow with no x/y offset, a 20px blur-radius and a relatively small (-10px) spread-radius.

Small negative blur-radius

The example below uses a blur-radius of -10px on a box 300px large and 300px high.

box-shadow: 0 0 20px -10px black inset;

We tested it both in an older version of iOS Safari 12.4.6 and on iOS Safari 13.4. The rendering appears good in both versions of the browser.

Large negative blur-radius

The example below uses a blur-radius of -150px on a box 300px large and 300px high.

If you put a larger negative number for the spread-radius value, iOS will render the box with a black bar, horizontally positioned depending on the amount of the spread radius you set.

-- 
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/20200402/12619e9c/attachment.htm>