position-anchor slider demo: adjust position and add support note

[chrisdavidmills]

Description

As per #42767, The thumb-slider anchor positioning demo on the position-anchor reference page doesn't work properly. This is because the -webkit-prefixed thumb pseudo-element doesn't work in Firefox. We could add in the -moz-prefixed version, but that still doesn't fix it because it is currently not anchorable (see https://bugzilla.mozilla.org/show_bug.cgi?id=1993699).

As a temporary fix, I have elected to move that demo to the end of the demos list, so it isn't quite so prominent, and add a note to explain the current support issue. I don't think we can really add this into BCD comfortably without lots of hassle, and hopefully we can just remove the note and update the demo once the bug is fixed.

Motivation

Additional details

Related issues and pull requests

Fixes #42767

[github-actions]

Preview URLs (1 page)

• /en-US/docs/Web/CSS/Reference/Properties/position-anchor

Flaws (5)

Found an unexpected or unresolvable flaw? Please report it here.

URL: /en-US/docs/Web/CSS/Reference/Properties/position-anchor
Title: position-anchor
Flaw count: 5

• broken_links:
  • Link /en-US/docs/Web/CSS/dashed-ident is a redirect
• macros:
  • Macro cssinfo produces link /en-US/docs/Web/CSS/CSS_cascade/Value_processing which is a redirect
  • Macro cssinfo produces link /en-US/docs/Web/CSS/CSS_cascade/Inheritance which is a redirect
  • Macro cssinfo produces link /en-US/docs/Web/CSS/CSS_cascade/Value_processing which is a redirect
  • Macro cssinfo produces link /en-US/docs/Web/CSS/CSS_animated_properties which is a redirect

External URLs (1)

URL: /en-US/docs/Web/CSS/Reference/Properties/position-anchor
Title: position-anchor

• https://bugzil.la/1993699 (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2026-02-03 09:03:56)

[estelle]

comments are a suggested way to future proof the example (all that will need updating when supported in FF will be the note).

[estelle]

don't just add the moz here. use where or is, which is forgiving. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Selector_list#forgiving_selector_list

[chrisdavidmills]

I tried this, and couldn't get it to work. The syntax I tried was this (and several variations):

:where(input::-webkit-slider-thumb, input::-moz-range-thumb) {
  anchor-name: --thumb;
}

I've therefore not implemented this, or the associated changes.

Any thoughts on how to make this syntax work?

[estelle]

fudge. Forgot that pseudo‑elements cannot appear inside the argument of functional pseudo‑classes like :is(), :where(), and :not(), so it has to be repeated.

input::-webkit-slider-thumb {
  anchor-name: --thumb;
}
 input::-moz-range-thumb {
  anchor-name: --thumb;
}

we should future-proof with an @supports, which is easier said then done. I am currently marinating on how you you can test if the the anchor part, the XXX in this:

@supports selector(::-moz-range-thumb) {
/* only FF sees this */
  @supports not (XXX) {
    body::before {
      content: "Your browser doesn't support anchors on thumbs.";
      background-color: wheat;
      display: block;
      text-align: center;
   }
  }
}

what is XXX?

[chrisdavidmills]

input::-moz-range-thumb {
  anchor-name: --thumb;
}

I've added this in, and explained it in the text. This at least future proofs it in that it will start working when Fx start supporting anchors on thumbs.

we should future-proof with an @supports, which is easier said then done. I am currently marinating on how you you can test if the the anchor part, the XXX in this:

I can understand why you want to do this, but I don't think it is possible. I think we should just get this merged without this.

[estelle]

Suggested change

	> The anchor positioning CSS for this demo currently doesn't work in Firefox. The `::-webkit-slider-thumb` pseudo-element isn't supported in Firefox and, while there is a Firefox-specific equivalent — {{cssxref("::-moz-range-thumb")}} — it is currently not anchorable (see [Firefox bug 1993699](https://bugzil.la/1993699)).
	> The anchor positioning CSS for this demo currently doesn't work in Firefox. The {{cssxref("::-moz-range-thumb")}} is currently not anchorable (see [Firefox bug 1993699](https://bugzil.la/1993699)).

(and move this to after the results)

[chrisdavidmills]

Moved