[Webkit-unassigned] [Bug 254151] New: border-radius does not apply consistently to all corners of a child element across Safari for iOS and macOS

[bugzilla-daemon at webkit.org]

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

            Bug ID: 254151
           Summary: border-radius does not apply consistently to all
                    corners of a child element across Safari for iOS and
                    macOS
           Product: WebKit
           Version: Safari 16
          Hardware: Mac (Intel)
                OS: macOS 13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: cchana at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 465516

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

Screenshot of a webpage where an element has a border-radius, but the element within inherits rounded corners at the top, but not at the bottom of the element.

When applying a border-radius to an element, the content within will overlap causing the rounded corners to look untidy and only occurs with the top two corners.

On Desktop, this can be overcome by enabling overflow: hidden and in the example Pen linked to, after toggling it once the border-radius can no longer be broken out from.

https://codepen.io/cchana/pen/oNPPwVj?editors=1111

This is the basic HTML and CSS required to replicate the issue:

    <ul>
      <li><img src="https://www.goodgear.club/images/items/256/timex-waterbury-classic-chronograh-40mm.jpg" /></li>
    </ul>

    li {
      border: 2px solid red;
      border-radius: 10px;
      width: fit-content;
    }

I originally began digging into this issue because my example using grid had this issue on Safari for iOS where it actually affects the bottom corners. Applying the overflow:hidden does not make any difference in Safari for iOS. The attached image shows the bottom corners with the element overlapping the outer element that has border-radius applied, but the top corners are not affected.

I have provided an example with an image, but this applies to any element and that includes the ::before and ::after pseudo-elements.

-- 
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/20230320/914d7be6/attachment-0001.htm>