Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Examples on page flicker white in Safari 17 #10764

Open
darzu opened this issue Mar 20, 2024 · 7 comments · May be fixed by #10775
Open

Examples on page flicker white in Safari 17 #10764

darzu opened this issue Mar 20, 2024 · 7 comments · May be fixed by #10775
Labels
3rd-party Issues related to third-parties, such as Pocket or Google Translate 🐛 bug Something isn't working, or isn't working as expected p2 We want to address this but may have other higher priority items.

Comments

@darzu
Copy link

darzu commented Mar 20, 2024

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

On Safari (Version 17.3.1 (19617.2.4.11.12), MacOS 14.3.1 (23D60), M1 2020) all the examples on this page flicker with flashes of white as seen below:

Screen.Recording.2024-03-20.at.8.21.18.AM.mov

What did you expect to see?

The examples shouldn't flicker white.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details
@darzu darzu added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label Mar 20, 2024
@chrisdavidmills
Copy link
Contributor

I can confirm this issue. Any thoughts @LeoMcA? Shall I refile this as a yari bug?

@bsmth bsmth transferred this issue from mdn/content Mar 21, 2024
@bsmth
Copy link
Member

bsmth commented Mar 21, 2024

Thanks a lot for raising this one. I've moved it into the Yari repo which looks like the right place for this 👍🏻

@pepelsbey
Copy link
Member

I see a similar problem in Safari on iOS 17.4

flicker.mov

@caugner
Copy link
Contributor

caugner commented Mar 21, 2024

I was able to reproduce the issue locally with Safari 17.4 and confirmed using BrowserStack Live that Safari 16.5 is unaffected, so it looks like a regression in Safari. Here's a screen recording with the DevTools Network tab open:

Screen.Recording.2024-03-21.at.17.55.08.mov

Unfortunately, I think we have to wait for Apple to fix the bug. I have submitted a report via Feedback Assistant (FB13694054).

@caugner caugner added 🐛 bug Something isn't working, or isn't working as expected p2 We want to address this but may have other higher priority items. 3rd-party Issues related to third-parties, such as Pocket or Google Translate and removed needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. labels Mar 21, 2024
@caugner caugner changed the title Examples on page flicker white Examples on page flicker white in Safari 17 Mar 22, 2024
fiji-flo added a commit that referenced this issue Mar 22, 2024
@fiji-flo
fix(live-sample): fix live samples for safari
196aa0a 
Lazy loading is tricky. Let's be more defenive.
It looked like we were hitting a wreid race condiction in Safari.
So checking for the source and removing the eventListener should
only improve things. This also sets the initialzed flag in the
runner earlier to avoid races.

This hopefully resolves  #10764
fiji-flo added a commit that referenced this issue Mar 22, 2024
@fiji-flo
fix(live-sample): fix live samples for safari
658cd63 
Lazy loading is tricky. Let's be more defensive.

This hopefully resolves  #10764

It looked like we were hitting a weird race condition in Safari.
So checking for the source and removing the eventListener should
only improve things. This also sets the initialized flag in the
runner earlier to avoid races.
@fiji-flo fiji-flo linked a pull request Mar 22, 2024 that will close this issue
Draft
@github-actions github-actions bot added the idle label Apr 21, 2024
@caugner caugner mentioned this issue May 20, 2024
Closed
3 tasks
@caugner
Copy link
Contributor

caugner commented May 20, 2024

@fiji-flo has reported this on the WebKit bug tracker: https://bugs.webkit.org/show_bug.cgi?id=271700

@github-actions github-actions bot removed the idle label May 20, 2024
@github-actions github-actions bot added the idle label Jun 20, 2024
@pepelsbey
Copy link
Member

pepelsbey commented Sep 20, 2024 •
edited
Loading

Still an issue in Safari 18. Examples on MDN have not been usable or sometimes even readable in mobile Safari for at least nine months. Is there anything we can do? The WebKit bug isn’t going anywhere, it seems.

ScreenRecording_09-20-2024.17-46-32_1.mov

@github-actions github-actions bot removed the idle label Sep 20, 2024
@github-actions github-actions bot added the idle label Oct 22, 2024
@mirunacurtean
Copy link

Update: Re-tested this on Safari 18:

@fiji-flo
-In the test environment, these examples are blank on Safari 18, but working on FF 132 and Chrome 130

Relative.colors.Safari.18.test.environment.mov

FF
image

@github-actions github-actions bot removed the idle label Nov 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
3rd-party Issues related to third-parties, such as Pocket or Google Translate 🐛 bug Something isn't working, or isn't working as expected p2 We want to address this but may have other higher priority items.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(live-sample): fix live samples for safari mdn/yari
6 participants
@chrisdavidmills @pepelsbey @caugner @darzu @bsmth @mirunacurtean