3 ms·

Anchor positioning sounds cool, but I ran into some very unintuitive behavior when I tried to use it. Can’t remember the details, it was a couple years ago.

bombcar 1y ago
My problem is always been on sites that have a menu or something similar at the top. The anchor always inevitably goes to the very top of the screen gets covered by whatever menu it is.
- chiefalchemist 1y ago
  Isnt there something like scroll-padding or scroll-margin? More or less an offset you can set so that doesn’t happen
jaffathecake 1y ago
I guess you're being downvoted as a general nay-sayer, but you're right. I tried this feature last month and a bunch of browser bugs and design issues got in the way. I reported them, and they're being worked on https://github.com/w3c/csswg-drafts/issues/12466 https://github.com/w3c/csswg-drafts/issues/12466 The `margin:0` issue was particularly frustrating & imo should have been covered in the article, as it's a real gotcha when trying to use popover & anchor positioning in combination.
- danielvaughn 1y ago
  Yeah I could have mentioned the actual issues I had. My first attempt was to anchor an element to another one that occurred later in the document order, and it didn’t work. The anchor must be placed before any of its dependents. It kind of makes sense, but doesn’t jump out as intuitive.
  - jaffathecake 1y ago
    That document order thing doesn't sound right to me. Here's a demo where the popover appears before the anchor https://codepen.io/jaffathecake/pen/MYargba?editors=1100 https://codepen.io/jaffathecake/pen/MYargba?editors=1100
    - danielvaughn 1y ago
      Interesting! I decided to reproduce the issue I saw, here it is: https://codepen.io/danielvaughn/pen/myepyER?editors=1100 https://codepen.io/danielvaughn/pen/myepyER?editors=1100 Maybe it has to do with multiple anchors? Similar to your earlier comment, I don't know if this is a bug or is me just misunderstanding the spec.

bombcar 1y ago

My problem is always been on sites that have a menu or something similar at the top. The anchor always inevitably goes to the very top of the screen gets covered by whatever menu it is.

chiefalchemist 1y ago
Isnt there something like scroll-padding or scroll-margin? More or less an offset you can set so that doesn’t happen

jaffathecake 1y ago

I guess you're being downvoted as a general nay-sayer, but you're right. I tried this feature last month and a bunch of browser bugs and design issues got in the way. I reported them, and they're being worked on https://github.com/w3c/csswg-drafts/issues/12466 https://github.com/w3c/csswg-drafts/issues/12466 The `margin:0` issue was particularly frustrating & imo should have been covered in the article, as it's a real gotcha when trying to use popover & anchor positioning in combination.

danielvaughn 1y ago
Yeah I could have mentioned the actual issues I had. My first attempt was to anchor an element to another one that occurred later in the document order, and it didn’t work. The anchor must be placed before any of its dependents. It kind of makes sense, but doesn’t jump out as intuitive.
- jaffathecake 1y ago
  That document order thing doesn't sound right to me. Here's a demo where the popover appears before the anchor https://codepen.io/jaffathecake/pen/MYargba?editors=1100 https://codepen.io/jaffathecake/pen/MYargba?editors=1100
  - danielvaughn 1y ago
    Interesting! I decided to reproduce the issue I saw, here it is: https://codepen.io/danielvaughn/pen/myepyER?editors=1100 https://codepen.io/danielvaughn/pen/myepyER?editors=1100 Maybe it has to do with multiple anchors? Similar to your earlier comment, I don't know if this is a bug or is me just misunderstanding the spec.