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.

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

Fix the iframe background color #478

Merged
merged 1 commit into from
Nov 19, 2024

Conversation

greggman
Copy link
Collaborator

Originally when I did this 8 months ago I set the CSS a certain way that works in Chrome but not Firefox. I filed a bug for Firefox

https://bugzilla.mozilla.org/show_bug.cgi?id=1885048

They pointed out the bug is in Chrome and Firefox is correct. I put the CSS to match what Firefox said was correct and found the corresponding bug in Chrome which was basically being ignored. (I can't seem to find the bug now)

Anyway, my understanding is, since the web started, iframes content gets the background color of the iframe element. Unless of course they set their own background color and that, with white being the default backgrounc color, most pages expect a white background and so iframe elements need have a white background otherwise content breaks.

Often colors are now set via color-scheme but color-scheme is ignored in the iframe content if its the same as the iframe element's color-scheme because otherwise the previous rule about background color would be un-enforced.

The solution appears to be, set the iframe element's color-scheme to "initial". Now the iframe's content color-scheme setting is not ignored.

Safari - Light

Screenshot 2024-11-15 at 9 28 28

Safari - Dark

Screenshot 2024-11-15 at 7 57 47

Firefox - Light

Screenshot 2024-11-15 at 9 28 39

Firefox - Dark

Screenshot 2024-11-15 at 9 26 40

Chrome - Light

Screenshot 2024-11-15 at 9 28 20

Chrome - Dark

Screenshot 2024-11-15 at 9 29 28

I think this works. Originally when I did this 8 months ago
I set the CSS a certain way that works in Chrome but not Firefox.
I filed a bug for Firefox

https://bugzilla.mozilla.org/show_bug.cgi?id=1885048

They pointed out the bug is in Chrome and Firefox is correct.
I put the CSS to match what Firefox said was correct and found
the corresponding bug in Chrome which was basically being ignored.
(I can't seem to find the bug now)

Anyway, my understanding is, since the web started, iframes content
gets the background color of the iframe element. Unless of course
they set their own background color and that, with white being the
default backgrounc color, most pages expect a white background and
so iframe elements need have a white background otherwise content
breaks.

Often colors are now set via `color-scheme` but color-scheme is
ignored in the iframe content if its the same as the iframe element's
color-scheme because otherwise the previous rule about background color
would be un-enforced.

The solution appears to be, set the iframe element's color-scheme
to "initial". Now the iframe's content color-scheme setting is not
ignored.
@beaufortfrancois
Copy link
Collaborator

The PR looks good in general but it does not fix my original issue. You can try it at http://localhost:8080/?sample=computeBoids. The perf UI text (in white) is not visible as the iframe background is white.

@greggman
Copy link
Collaborator Author

Sorry I got confused that this was the computeboids demo and not the new timestamp demo. That one uses a black background for the stats.

@greggman greggman merged commit 8f9e6b6 into webgpu:main Nov 19, 2024
1 check passed
@greggman greggman deleted the fix-iframe-background branch November 19, 2024 17:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants