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

"cool fun experimental" notice creates a somewhat unusable experience in Firefox #1106

Closed
jshwlkr opened this issue Mar 14, 2024 · 7 comments · Fixed by #1117
Closed

"cool fun experimental" notice creates a somewhat unusable experience in Firefox #1106

jshwlkr opened this issue Mar 14, 2024 · 7 comments · Fixed by #1117
Assignees
@brandonpayton
Labels
[Aspect] Browser [Priority] High [Type] Bug An existing feature does not function as intended

Comments

@jshwlkr
Copy link

jshwlkr commented Mar 14, 2024

Specifically Firefox 115.8.0esr on OSX14.4. Can't seem to dismiss the notice.
This issue does not appear to occur for the embedded playground instance on https://wordpress.org/playground/ but does occur for instances like the one at https://playground.wordpress.net/

Screenshot 2024-03-14 at 11 06 52 AM
@adamziel adamziel added [Type] Bug An existing feature does not function as intended [Aspect] Browser [Priority] High labels Mar 14, 2024
@adamziel
Copy link
Collaborator

cc @brandonpayton would you be able to investigate?

@adamziel adamziel added this to the Zero Crashes milestone Mar 14, 2024
@brandonpayton
Copy link
Member

cc @brandonpayton would you be able to investigate?

Yep, I can investigate.

@brandonpayton
Copy link
Member

I am able to reproduce this. Looking into it.

@brandonpayton
Copy link
Member

It looks like this is due to CSS nesting which is not supported in Firefox 115 (the current ESR major version). Firefox added support for CSS nesting in Firefox 117.
https://caniuse.com/css-nesting

@brandonpayton brandonpayton mentioned this issue Mar 19, 2024
Merged
@brandonpayton
Copy link
Member

Opened PR #1117 to fix this. It should have been much faster to fix, but FF ESR was behaving sluggishly with Playground, especially with dev tools open.

adamziel pushed a commit that referenced this issue Mar 19, 2024
@brandonpayton
Fix experimental notice in FF ESR (#1117)
80201b4 
Fixes #1106 where the experimental notice takes over most of the content
area.

<img alt="Screenshot 2024-03-14 at 11 06 52 AM" width="1728"
src="https://private-user-images.githubusercontent.com/515050/312893019-757cc95c-b84b-421e-b34c-b9429b23f896.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTA4Nzg5NDIsIm5iZiI6MTcxMDg3ODY0MiwicGF0aCI6Ii81MTUwNTAvMzEyODkzMDE5LTc1N2NjOTVjLWI4NGItNDIxZS1iMzRjLWI5NDI5YjIzZjg5Ni5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMzE5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDMxOVQyMDA0MDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mNTVlZTY2MGE5MGRhNmY1YjNiODJmNWJiOWVjNjA5OTk3ZDVkMjM0YjUzODA1NDAzYTRjOTFiMWFlYmZmODBiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.ad2mS5a6hdiT6e7lc3TW1gXPbiw5faGZaCtXta0qDQU">

## What problem is it solving?

The experiemental-and-fun notice is styled with nested CSS which is not
supported by Firefox ESR v115.x. Firefox v117.x introduced CSS nesting
support.

## How is the problem addressed?

This PR removes use of nested CSS for now.

## Testing Instructions

- Install and launch Firefox ESR v115.x
- Run `npm run dev`
- Navigate to http://localhost:5400/website-server/ and observe the
large notice
- If the notice is missing, clear cookies for the current site and
reload the page.
- Apply this patch
- Clear cookies for the current site, reload the page, and observe the
notice is displayed reasonably at the bottom of the screen.

<img width="456" alt="image"
src="https://github.com/WordPress/wordpress-playground/assets/530877/2ccd26c6-50f8-4822-b84f-e1b2864bb3ef">
NOTE: Playground is failing to load in FF ESR from localhost, but it is
likely unrelated. This is just a CSS change, and the problem occurs on
both trunk and this branch.
@adamziel adamziel reopened this Mar 19, 2024
@adamziel
Copy link
Collaborator

adamziel commented Mar 19, 2024 •
edited
Loading

Let's keep this issue open until the fix auto-deploys in 9 hours and we can confirm it worked.

@brandonpayton
Copy link
Member

Looks like the notice is OK now:
Screenshot 2024-03-20 at 10 11 22 AM

Thanks for the report, @jshwlkr!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@brandonpayton brandonpayton

Labels
[Aspect] Browser [Priority] High [Type] Bug An existing feature does not function as intended
Projects
Playground Board
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix experimental notice in FF ESR brandonpayton/wordpress-playground
3 participants
@adamziel @jshwlkr @brandonpayton