Bug 296800 – Incorrect blur filter rendering on rotated elements with overflow:hidden

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

Created attachment 476246 [details]
chrome reproduction, which is expected result

Blur filter is incorrectly applied to rotated elements when the parent container has overflow: hidden, causing the blur effect to be clipped as if the element wasn't rotated.

Steps to Reproduce

1. Open https://codepen.io/newfox79/pen/dPYvboo
2. View the page in Safari

Expected Result

The blurred rotated element should display as a continuous diagonal line with smooth blur edges extending across the visible container area.

Actual Result

The blur effect appears to be clipped/calculated incorrectly, not accounting for the element's rotation when determining blur boundaries within the overflow-hidden container.

Environment
Browser: Safari Version 18.1 (20619.2.8.11.9)
OS: MacBook Pro M4, macOS Sequoia 15.1
Reproduction: Consistently reproducible

Additional Notes

The same code renders correctly in Chrome and Firefox, showing the expected continuous blurred diagonal line.

Created attachment 476247 [details]
safari reproduction, showing incorrect clipping of filter blur

[Karl Dubost]

Created attachment 476274 [details]
rendering in safari, firefox, chrome

This is the rendering I get in all browsers.

Safari Technology Preview  26.0 (224)         20622.1.20.1
Firefox Nightly            143.0a1       14325.7.28
Google Chrome Canary       140.0.7331.0  7331.0

[Karl Dubost]

I'm not able to reproduce it.

[Simon Fraser (smfr)]

Fixed by 296844@main ?

[Simon Fraser (smfr)]

Yes, confirmed.

*** This bug has been marked as a duplicate of bug 219520 ***