Skip to content

Commit

Permalink
add note about FOUC workarounds
Browse files Browse the repository at this point in the history
  • Loading branch information
keithamus authored Feb 19, 2024
1 parent 8264626 commit 9663857
Showing 1 changed file with 12 additions and 0 deletions.
12 changes: 12 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,18 @@ some caveats which will need accommodations:
now is to add `!important` to conflicting properties in your `:host` rule.
See [#147](https://github.com/oddbird/popover-polyfill/issues/147) for more.

- Given that the CSS is injected using JavaScript, you may find that you
temporarily see popovers as open while the JS is loading. To work around
this, you can add the following CSS to your project:

```css
@supports not selector(:popover-open) {
[popover]:not(.\:popover-open) {
display: none;
}
}
```

- When supported, the polyfill creates a cascade layer named `popover-polyfill`.
If your styles are not in layers then this should have no impact. If your
styles do use layers, you'll need to ensure the polyfill layer is declared
Expand Down

0 comments on commit 9663857

Please sign in to comment.