Examples flash in Safari

[romainmenke]

Summary

In Safari the examples embedded as iframes render over and over again leading to flashing content.

Warning the flashes are very intense

https://github.com/mdn/yari/assets/11521496/b94c0d83-79ed-4d38-9bfd-43ca91d2efe6

In this screenshot I select the iframe in the debugger. But it is unselected immediately because the element is deleted and recreated.

https://github.com/mdn/yari/assets/11521496/3274737d-a69d-45b3-b499-1f1aad568e55

URL

Any page with such examples.

Reproduction steps

1. Use Safari
2. Visit any MDN page with examples in iframes

Expected behavior

I didn't expect flashes

Actual behavior

A lot of flashes

Device

Desktop

Browser

Safari

Browser version

Stable

Operating system

Mac OS

Screenshot

No response

Anything else?

No response

Validations

• [X] I have read the Community Participation Guidelines.
• [X] I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

[argl]

Example exposing the issue: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions/Using_CSS_math_functions#max_example

[mirunacurtean]

Update The examples have changed, but the flicker can still be reprroduced on more recent Safari versions (tested on 17.3 and 17.4)

https://github.com/mdn/yari/assets/53306802/f7ea737b-4f2f-4d71-9b5f-152444b6b12a

https://github.com/mdn/yari/assets/53306802/55928eb6-f1b3-4514-904c-9adf95017e48

Note: Could not reproduce this on Safari 15.6 and 16.5, but that may be due to testing this on browserstack where the flicker rate seems reduced.

https://github.com/mdn/yari/assets/53306802/e30f1c12-9ddf-47c6-b6df-6c40a1c230d1

[romainmenke]

Can we give this a higher priority given that this is exactly the kind of strobing effect that is triggering for photosensitive epilepsy?

[caugner]

Closing in favor of https://github.com/mdn/yari/issues/10764.