Bug 251502 - Incorrect rendering with combination of filter and border-radius inside overflow:hidden parent
Summary: Incorrect rendering with combination of filter and border-radius inside overf...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 16
Hardware: Mac (Intel) macOS 13
: P2 Normal
Assignee: Nobody
URL: https://codepen.io/amith-b/pen/JjBmQBy
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-02-01 04:18 PST by Amith B
Modified: 2023-06-14 17:21 PDT (History)
8 users (show)

See Also:

Attachments
missing border in safari (4.75 KB, image/png)
2023-02-01 04:18 PST, Amith B 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Amith B 2023-02-01 04:18:57 PST 
Created attachment 464794 [details]
missing border in safari

When using border-radius and overflow: hidden to parent and the child DOM elements. The border applied to child DOM element disappears in Safari. Other browsers work as expected.

Applying transform:scale(1) to child DOM works, but not sure why it works.

Codepen link for reproducing the bug: https://codepen.io/amith-b/pen/JjBmQBy
Comment 1 Radar WebKit Bug Importer 2023-02-01 09:40:03 PST 
<rdar://problem/104919951>
Comment 2 Simon Fraser (smfr) 2023-02-01 09:42:31 PST 
Ah, this is not about the fact that it's a <button>. It's about the filter.