search

oddbird / css-anchor-positioning

Polyfill for CSS Anchor Positioning
https://anchor-polyfill.netlify.app/
BSD 3-Clause "New" or "Revised" License
225 stars 5 forks source link

[BUG] Media Queries are not applied to `anchor-name` #212

Open jamesnw opened 1 week ago

jamesnw commented 1 week ago

Describe the bug If a anchor-name is defined inside a media query, the context of the media query is stripped out. This means that you can't use the polyfill to dynamically select the anchor based on screen size or other media queries.

To Reproduce

  1. Go to https://codepen.io/jamessw/pen/XWwveBJ in a browser that requires the polyfill
  2. See that the target aligns with the anchor that is defined in a @media print block, even though the non-polyfilled declarations are not applied.

Expected behavior Media Queries should be respected for the anchor-name

Browsers tested on Safari