CSS calc() unterscheidet sich in Samsung/Firefox vs. Chrome/Edge ⇐ CSS

[Anonymous]

Ich arbeite mit dem folgenden Code:

Code: Select all

Und ich teste zwei Ausdrücke:
Testfall 1

Code: Select all

calc(30px / 720px * 100vw)

Testfall 2

Code: Select all

calc(var(--w) / 720px * 100vw)

Logischerweise sollten beide Ausdrücke das gleiche Ergebnis liefern, da --w auf 30px gesetzt ist.
Die Ergebnisse unterscheiden sich jedoch je nach Browser:

• Chrome, Edge, Opera: Berechnen Sie beide Ausdrücke korrekt.
• Samsung Internet (mobil) und Firefox (Desktop): Der zweite Ausdruck kann nicht ausgewertet werden und wird stattdessen als 100 % behandelt, als ob die Berechnung nicht aufgelöst werden kann.

Ich vermute – kann es aber nicht bestätigen –, dass dieses Problem mit der eingeschränkten Unterstützung dessen zusammenhängt, was MDN als „typisierte Arithmetik“ bezeichnet, bei der die Division eingegebener Werte eine Zahl ohne Einheit ergibt (Referenz:

https://developer.mozilla.org/en-US/doc ... alues/calc).

Dies ist nur eine Hypothese und keine verlässliche Erklärung, aber es ist eine mögliche Vermutung, warum sich diese Browser unterschiedlich verhalten, wenn die Berechnung eine CSS-Variable einschließt.
Dennoch sollten beide Ausdrücke theoretisch den gleichen Wert berechnen, daher ist das Verhalten bei allen Browsern inkonsistent ist ziemlich verwirrend.
Wie kann dieses Problem gelöst werden?
Wenn das Problem auf eine Parsing- oder Kompatibilitätsbeschränkung in Samsung Internet oder Firefox zurückzuführen ist, würde ich mich über zuverlässige Problemumgehungen freuen.
Vorschau
Ich habe eine Testseite erstellt, um zu vergleichen, wie Chrome und Firefox mit drei verschiedenen Fällen von calc()- und CSS-Variablen umgehen:

https://codepen.io/wyqfxyfl-the-bashful/pen/KwzGqvW
Unten ist das Verhalten der einzelnen Fälle in beiden Browsern aufgeführt.
Ich kann nicht einfach Folgendes verwenden:
--w: 30;
da einige Variablen Farbwerte, Zeichenfolgen oder andere Nicht-Längenwerte enthalten können.
Gibt es eine zuverlässige und sichere Möglichkeit, dafür zu sorgen, dass sich calc() mit CSS-Variablen in Chrome, Firefox und Samsung Internet konsistent verhält, ohne die Problemumgehung für Fall 3 zu verwenden?
(Und nur zur Klarstellung: Fall 3 ist nicht der Ansatz, den ich möchte.)