Bug 201234 – REGRESSION (Safari 13): webkit-backdrop-filter sometimes leaving empty space between border

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

[Jonathan Bedard]

Created attachment 377475 [details]
wrong

This is probably an issue with sub-pixel layout, it's also a relatively recent regression (last month or 2, although we don't have a test for this and I haven't been paying attention to exactly when it regressed). I was able to reproduce the problem on r248867. The specific css causing this bug is:

.tooltip-content {
    z-index: 50;
    position: absolute;
    -webkit-backdrop-filter: blur(10px) brightness(88%);
    backdrop-filter: blur(10px) brightness(88%);
    color: var(--boldInverseColor);
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    font-size: var(--smallSize);
    list-style: none;
    max-width: 600px;
}

I'll attach a screenshot of one of these tooltip behaving correctly and incorrectly.

[Jonathan Bedard]

Created attachment 377476 [details]
right

[Simon Fraser (smfr)]

Can you attach an HTML file that shows the issue?

[Jonathan Bedard]

Created attachment 377512 [details]
invalid-border-with-backdrop-filter.html

[Radar WebKit Bug Importer]

<rdar://problem/54884768>

[Christian Kaindl]

Created attachment 397467 [details]
backdrop-filter rendering bug with box-shadow

This issue is not only present with border-radius, but also when applying a box-shadow to the element. The backdrop-filter is offset by the size of the blur radius in addition to the offset by border-width. In the attachment I only added a box-shadow to Jonathan's HTML attachment, which makes the bug very visible.

This very much impacts our website right now (quantargo.com), because any element with backdrop-filter that also has a shadow looks broken on iOS (Chrome, and Firefox with the `layout.css.backdrop-filter.enabled` flag, work correctly).

[Christian Kaindl]

Created attachment 397468 [details]
backdrop-filter bug on quantargo.com

Attached is also a screenshot our production website at https://www.quantargo.com/courses/course-r-introduction/01-basics/01-r-is-everywhere/exercise-01-01-03

You can clearly see areas to the left and at the top of the popup where the effect is not applied.

[Simon Fraser (smfr)]

Please test in STP 105

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

[Christian Kaindl]

Thanks for your fast response. Tested in Safari Tech Preview and it is indeed fixed. Thanks!