"Hole punch" rendering glitch in Safari for iOS 15

• Component: Layout and Rendering
• Status: RESOLVED MOVED

[Joseph Pearson]

Created attachment 435255 [details]
The hole-punch effect in Safari for iOS 15

When semi-opaque elements are transformed over other content, they can punch a hole in the box behind them, through to the underlying content.

I have a minimal, consistent reproduction here: https://josephpearson.org/experiments/saf-15-holepunch/

See the comments in the HTML source for the CSS properties that seem to be significant to this reduction.

Note that any GPU activity (like the navigation bar shrinking) can "correct" the holepunch. If it doesn't happen on your first try, tap the ghost emoji a few times to retry. Opacity *may* be a red herring, but it has been common to all the instances I've seen. In this case the semi-opacity seems to be the alpha channel in the glyph.

IMPORTANT: I have only observed this in iOS 15 developer betas (from the first one in June through the most recent one). I have not observed it in macOS Safari TP yet.

I have also filed a radar in Apple's Feedback Assistant for this problem: FB9482087

[Simon Fraser (smfr)]

<rdar://81742642>

[Simon Fraser (smfr)]

Joseph, what iOS hardware are you seeing this on?

[Simon Fraser (smfr)]

I managed to reproduce on iPhone 7. Might be related to our "background is opaque in rect" logic.

[Joseph Pearson]

Thanks. fwiw, my test device at iOS 15 is an iPhone X.

[Simon Fraser (smfr)]

We believe this is a bug in an underlying framework, and will be fixed in a future OS release.