Examples on CSS Anchor pages do not work in Firefox 135.0 on Mac OS Ventura

[dyoung404]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning/Using

What specific section or headline is this issue about?

Anchoring infobox to anchor while scrolling

What information was incorrect, unhelpful, or incomplete?

It appears that the CSS used to provide the examples on this page do not work in Firefox 135.0 on Mac OS Ventura.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus
  elementum sagittis vitae et.
</p>

<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>This is an information box.</p>
</div>

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
  Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
  accumsan.
</p>

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

body {
  width: 50%;
  margin: 0 auto;
}

.anchor {
  anchor-name: --myAnchor;
}

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

.infobox {
  position-anchor: --myAnchor;
  position: fixed;
  inset-block-start: anchor(end);
  inset-inline-start: anchor(self-end);
  margin: 5px 0 0 5px;
}

What did you expect to see?

I would expect that, when I scroll the div, the infobox should maintain it's positioning relative to the anchor -- meaning it should scroll with the anchor element. It somewhat works in Chrome 130.0.x. The infobox scrolls w/ the anchor when the viewport is scrolled, but it's initial positioning doesn't align to the left edge of the anchor element like it does in Firefox.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/css/css_anchor_positioning/using
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning/Using
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/css_anchor_positioning/using/index.md
• Last commit: 8a08007
• Document last modified: 2024-12-21T00:42:29.000Z

[Josh-Cena]

Firefox does not support anchor positioning. See https://developer.mozilla.org/en-US/docs/Web/CSS/position-anchor