Bug 251502

Summary:

Incorrect rendering with combination of filter and border-radius inside overflow:hidden parent

Product:

WebKit

Reporter:

Amith B <amithbr6>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

ahmad.saleem792, akeerthi, bfulgham, cdumez, simon.fraser, webkit-bug-importer, wenson_hsieh, zalan

Priority:

Keywords:

InRadar

Version:

Safari 16

Hardware:

Mac (Intel)

OS:

macOS 13

URL:

https://codepen.io/amith-b/pen/JjBmQBy

Attachments:

Description	Flags
missing border in safari	none

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.