Chrome aktualisiert die Position der Symbole bei Inhaltsänderungen nicht mehr [geschlossen] ⇐ CSS

[Anonymous]

https://prnt.sc/GWqQYPCIkc-A
Ein Screenshot von Symbolen, die sich außerhalb des Bildschirms befinden und von einem Browser an der richtigen Stelle erkannt werden
Was ich verwende:
Ich verwende PrimeVue-Symbole, die allen anderen Symbolanbietern ähneln, indem sie eine benutzerdefinierte Schriftart in :before selector nutzen.
Ich weiß, dass das Problem bei Inhaltsänderungen auftritt, weil die Seitensymbole über dem Inhalt gut aussehen Änderung.
Ich habe das Problem bereits gelöst, indem ich dem Browser ausdrücklich gesagt habe, er solle :vor dem Element innerhalb des Span-Elements positionieren, obwohl es bereits dort ist (Screenshot)
Gibt es einen Grund, warum der Browser aufgehört hat, sich mit Elementpositionen zu beschäftigen?
Ich habe das Gefühl, dass es nach dem letzten Chrome-Update begann
Ich wurde aufgefordert, einen greifbaren Code abgeschnitten zu haben.
Ich konnte um den Fehler mit diesem Setup zu reproduzieren.
Ich verwende vue3, prime vue und primeicons für die Handhabung einer Benutzeroberfläche, die eine Änderung der Inhaltshöhe verursacht.
Der minimale zu reproduzierende Code wäre wahrscheinlich:

Code: Select all

I'm an element which will cause an increase in page height



I'm a paragraph which will be shifted by DIV above

I'm a button which will cause the height shift

Die minimalen Abhängigkeiten für diesen Fehler sind wahrscheinlich:

Code: Select all

{
"node": "^25 || >=25.0.0"
"@primeuix/themes": "^1.2.3",
"@primevue/forms": "^4.3.9",
"@tailwindcss/vite": "^4.1.13",
"primeicons": "^7.0.0",
"primevue": "^4.3.9",
"vue": "^3.5.18",
"postcss": "^8.5.6",
"sass-embedded": "^1.92.1",
"tailwindcss": "^3.4.17",
"vite": "^7.0.6",
"vite-plugin-vue-devtools": "^8.0.0"
}

Der Code, den ich verwendet habe, um den angeblichen Chrome-Fehler zu beheben, ist:

Code: Select all

.pi {
position: relative;
.pi:before {
position: relative;
}
}