Darstellungsfehler von Zahlen auf Algorand-Website

Upgrader

Sowohl im Normal- wie auch im Privatmodus schafft es FF für Android nicht, die Zahlen auf folgender Website korrekt darzustellen. Dass es vermutlich nicht an der Website liegt, scheint für mich klar zu sein, da Chrome eine richtige Darstellung der Zahlenwerte ermöglicht.

(Habe gerade nicht meinen Laptop hier, um es mit dem FF for Windows zu checken.)

Algorand Developer Portal

Algorand Developer Docs, SDKs, REST APIs, CLI tools, ecosystem projects, metrics dashboard and sample code, how-tos, and news from the Algorand developer…

metrics.algorand.org

2002Andreas

Zitat von Upgrader

um es mit dem FF for Windows zu checken.

Win10, neues Firefox Profil:

Upgrader

Und so sieht es auf meinem FF for Android aus:

2002Andreas

Zitat von Upgrader

Und so sieht es auf meinem FF for Android aus:

So in einem anderen Firefox Profil mit Erweiterungen und einigen anderen Anpassungen:

Zahlen stimmen also auch nicht.

Upgrader

Mein FF for Android läuft ohne Add-ons. Daran kann es zumindest nicht liegen.

.DeJaVu

Sieht auch hier so quer aus, scrollt einmalig, wenn überhaupt, auch als Anzeige als "Desktop" keine Besserung. Auf dem Desktop ist es richtig.

HTML von einer Zahl

Code

<span data-testid="AnimatedCounterDigit.list-container" class="animated-counter-digit-list-container" style="transform: translateY(-84px);"><span data-testid="AnimatedCounterDigit.dash-symbol">-</span>
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</span>
<span data-testid="AnimatedCounterDigit.list-container" class="animated-counter-digit-list-container" style="transform: translateY(-252px);"><span data-testid="AnimatedCounterDigit.dash-symbol">-</span>
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</span>
<span data-testid="AnimatedCounterDigit.separator" style="transform: translateY(-10px);">,</span>
<span data-testid="AnimatedCounterDigit.list-container" class="animated-counter-digit-list-container" style="transform: translateY(-196px);"><span data-testid="AnimatedCounterDigit.dash-symbol">-</span>
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</span>
<span data-testid="AnimatedCounterDigit.list-container" class="animated-counter-digit-list-container" style="transform: translateY(-252px);"><span data-testid="AnimatedCounterDigit.dash-symbol">-</span>
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</span>
<span data-testid="AnimatedCounterDigit.list-container" class="animated-counter-digit-list-container" style="transform: translateY(-168px);"><span data-testid="AnimatedCounterDigit.dash-symbol">-</span>
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</span>
<span data-testid="AnimatedCounterDigit.separator" style="transform: translateY(-10px);">,</span>
<span data-testid="AnimatedCounterDigit.list-container" class="animated-counter-digit-list-container" style="transform: translateY(-56px);"><span data-testid="AnimatedCounterDigit.dash-symbol">-</span>
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</span>
<span data-testid="AnimatedCounterDigit.list-container" class="animated-counter-digit-list-container" style="transform: translateY(-224px);"><span data-testid="AnimatedCounterDigit.dash-symbol">-</span>
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</span>
<span data-testid="AnimatedCounterDigit.list-container" class="animated-counter-digit-list-container" style="transform: translateY(-224px);"><span data-testid="AnimatedCounterDigit.dash-symbol">-</span>
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</span>

Alles anzeigen

Sören Hentzschel

Keine Probleme bei mir, weder auf einem MacBook Pro M1 Pro mit macOS 13 noch auf einem OnePlus 10 Pro mit Android 12.

Zitat von Upgrader

Dass es vermutlich nicht an der Website liegt, scheint für mich klar zu sein

Am Ende des Tages sind Darstellungsprobleme auf Websites (sofern nicht durch den Nutzer selbst verursacht) immer auch Probleme der Website, da Millionen andere Websites zeigen, dass es auch ohne Darstellungsprobleme geht. Unabhängig davon, ob das Problem nur in einem oder in mehreren Browsern reproduziert werden kann. Ein Webentwickler hat für alles mehr als einen Weg und es ist letztlich seine Verantwortung, dass es auf jedem System gut aussieht.

milupo

Kein Problem bei mir. Allerdings etwas altes Gerät von Neffos mit Android 8.

Upgrader

Nur zur Vollständigkeit: Ich nutze ein Google Pixel mit Android 13.

.DeJaVu

Nachtrag - auf dem Xiaomi (Android 12) wird es falsch angezeigt, mein S9 (Android 9) zeigt es richtig an. Gleicher Firefox, gleiche Erweiterungen.

Upgrader

Habe herausgefunden, woran es bei meinem FF lag, und zwar an der Schriftgröße. Habe in den Einstellungen -> Barrierefreiheit den Wert wieder zurück auf 100 % gesetzt und schon stimmt die Anzeige der Zahlen. (Allerdings sind die 100 % auf dem kleinen Display des Pixel 4a auf Dauer zu anstrengend.)

EDIT: Mit aktivierter automatischer Schriftgrößenanpassung (was wohl default ist) werden die Zahlen NICHT korrekt angezeigt!!

milupo

Mit dem Nightly bei mir auch kein Problem. Sollte es doch an der Android-Version liegen?

.DeJaVu

Eher nicht. Ich bin seinem Hinweis auf Barrierefeiheit nachgegangen, hab das automatische abgestellt (worauf sich der %-Balken anschaltete, 100%), und sofort zeigte Firefox Nightly es auch auf dem Xiaomi richtig an. Auf dem S9 wird auch mit richtig angezeigt.

Upgrader

Also ein minimaler Optimierungsbedarf beim FF-Code?

.DeJaVu

Das musst du die Entwickler fragen. Ich weiss zB nur, dass mein spezielles CSS für diese Forum hier auf dem S9 toll aussieht, aber weil das

Xiaomi einen anderen (größeren) Viewport hat, dort zu Fehlern führt.

Redmi Note 10: 1080x2400, Density 2.75, Viewport unbekannt, dürfte größer als das S9 sein. (Redmi Note 9: 393x873)

S9: 1440x2960, Density 4.0, Viewport 360x740

Anmerkung, das Pixel 4A hat vergleichbare Dimensionen wie das Redmi Note 10

Pixel 4a viewport size, resolution, PPI, screen specs and CSS media queries | YesViz

Pixel 4a viewport size, resolution, PPI, screen size and CSS dimensions. Pixel 4a CSS media queries (retina or landscape) to write CSS for this device.

yesviz.com

1080x2340, Density 2.75, Viewport 393x851

Darstellungsfehler von Zahlen auf Algorand-Website

Ähnliche Themen

Betrieb von camp-firefox.de finanziell unterstützen

2021-Update: Aktualisierung auf WoltLab Suite 5.4

Ich komme mit meinen Anpassungen nicht weiter

Von Fußzeile wird nur oberer Teil gedruckt

Mal was Browser-Freies zum Lachen

Mozilla erneut mit Gewinn im Jahr 2020