Antwort an „Rolf B“ verfassen

Hallo Jürgen,

der Default für [popover] ist position:fixed, weshalb sie nicht mitscrollen. Ein Popover mit position:static ist so eine Sache, damit hebst Du das Anker-Feature auf (es ist nur für absolut und fix positionierte Elemente aktiv).

Positionsangabe über bottom oder right funktioniert auch in diesem Beispiel nicht, weder in Chrome noch in Firefox. Im Inspektor wird es nicht als falsch markiert, und es sollte doch laut Spec funktionieren, oder?

Was mit auch noch auffällt: Matthias hat unter "Anchor Positioning" geschrieben, man müsse den Polyfill nicht nur laden, sondern auch aktivieren:

<script type="module">
  if (!("anchorName" in document.documentElement.style)) {
    const { default: polyfill } = await import("https://unpkg.com/@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js");

    polyfill(true);
  }
</script>

Das machst Du nicht, du importierst nur und belässt es dabei. Ist der Aufruf der polyfill-Funktion nicht mehr nötig? Ich habe mir mal angeschaut, was aus dem import als Modul herauskommt, da ist kein Default-Export drin.

Abgesehen davon braucht man auch kein type="module" Script als Träger des Polyfills:

import("https://unpkg.com/@oddbird/css-anchor-positioning")
.then(modul => {
   // Callback startet wenn Polyfill geladen ist. modul.default ist leer.
});

Oder, mit manuellem Aufruf wenn man Optionen setzen will:

import("https://unpkg.com/@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js")
.then(modul => {
   // Callback startet wenn Polyfill geladen ist. modul.default enthält
   // die polyfill-Funktion
   modul.default({
      ...
   });
});

Rolf

--
sumpsi - posui - obstruxi
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen