[bug, frontpage] HiDPI logo werkt niet in Firefox?

[GekkePrutser]

Hee Devvers

Ik zag het volgende:



In Chrome krijg ik een mooi HiDPI logo. Maar in Firefox is het logo blurry. Ik draai in Windows 10 op 200% scaling (4K 24" scherm), kennelijk detecteren jullie of er een "retina" scherm gebruikt wordt en zo ja serveren jullie een ander logo. Maar het lijkt alsof dit in Firefox niet helemaal goed werkt.

Uiteraard heb ik ook geprobeerd mijn custom CSS uit te zetten maar dat hielp niet. Het gebeurt zowel bij het "grote pagina" logo als bij het "responsive, mobiel" kleinere logo met hamburger menu.

Ik dacht ik meld het even Als ik kan helpen met testen of meer informatie dan hoor ik het graag!

[Hero of Time]

Als je naar https://tweakers.net/devicedetect gaat en daar de hidpi versie forceert, is het logo dan wel scherp zoals bij Chrome? Als het dan niet het geval is, ligt het aan de rendering van Firefox.

[GekkePrutser]

Dat is de "4K of Ultra HD Monitors" optie toch?

Als ik die forceer dan is het inderdaad nog steeds onscherp. Vreemd! Het zou toch moeten werken in Firefox, veel andere afbeeldingen (en andere sites) zijn wel scherp.

[ACM]

Krijg je deze afbeelding op die plek (rechtsklik op logo, inspect element, in de popup/deelvenster zie je o.a. background-image)
https://tweakimg.net/g/if...k/tweakers_logo_v2_x2.png

Als je daar niet 'x2' in ziet, werkt deze css-rule niet voor jou:

Cascading Stylesheet:

@media (-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){

}

Wellicht wordt jouw resolutie als lager gezien dan die 120dpi (=96*1,25)?

Je kan nog proberen bovenstaande afbeelding te openen en dan ctrl+f5 'm hard te verversen.

[GekkePrutser]

Inderdaad, dat is hem, ik zie de x1 versie.

Ik denk inderdaad dat het hem daar in zit dan.. Vreemd dat hij dat niet detecteert, ik zit veel hoger dan 120 dpi.

Nu moet ik wel zeggen dat ik 3 displays heb, 1 HiDPI (4K op 24") en 2x 1280x1024 op 17". Misschien dat dat de detectie van slag brengt? Ik dacht eerst dat het een probleem was voor elke Firefox (met HiDPI) gebruiker, maar wellicht is dat niet zo.

Overigens gebruikt Firefox geen webkit dus dat zou er ook nog mee te maken kunnen hebben?

Edit: layout.css.devPixelsPerPx stond bij mij op -1. Heb hem nu op 2 gezet maar dat hielp niet. -1 is trouwens wel goed, want als ik hem op 2 zet dan schaalt hij op de 1280 schermen niet omlaag.

[ Voor 87% gewijzigd door GekkePrutser op 20-05-2018 14:21 ]

[Hero of Time]

Chrome gebruikt ook geen Webkit*, dus dat is hoe dan ook het probleem niet.

Er zijn sommige programma's die niet altijd lekker werken met schaling op Windows als er verschillende grootte schermen zijn aangesloten. Java is ook een ramp wat dat betreft. Je kan wel voor een applicatie bij de snelkoppeling aangeven of er schaling geforceerd moet worden. Test dat eens voor Firefox.


* Nu is Blink een (ondertussen hevig aangepaste) fork van webkit, maar dat terzijde.

[GekkePrutser]

Ja ik weet hoe dat werkt in Windows, maar Firefox staat nu op "Automatisch". Ik heb het al eens eerder (om een andere reden, ik wilde een web-remotedesktop viewer forceren om op hoge resolutie te werken) op andere standen geprobeerd, maar dan heb ik andere schalingsproblemen. Bijvoorbeeld tijdens het verplaatsen van een HiDPI scherm naar een LowDPI scherm werkt dan niet goed. Dus dat is niet echt een optie, Firefox is DPI aware dus Automatisch is in principe het beste.

Het gekke is dat als ik handmatig 2.0 als scalingsfactor instel op het HiDPI scherm dat het er prima uitziet, maar de juiste assets laden nog steeds niet. Als ik hem op 1.0 instel is de tekst superklein. Op de LowDPI schermen is het precies omgekeerd (enorm grote text op 2.0). Dus kennelijk weet Firefox heel goed wat de scalingsfactor is, maar houdt hij er op de een of andere reden geen rekening mee in de CSS.

Misschien is het een bug in Firefox? Maar het vreemde is dat het op andere sites (nu.nl, ars technica, hackaday enz) wel goed werkt, daar krijg ik gewoon de high-res assets te zien.

Ik ben wel benieuwd: Hebben anderen met Firefox (Windows 10) en 4K schermen ook dit probleem op Tweakers?

Uiteraard heb ik alle plugins al geprobeerd uit te zetten, dat hielp niet.

[ Voor 17% gewijzigd door GekkePrutser op 20-05-2018 18:00 ]

[Hero of Time]

Toch, zet het als test eens geforceerd op hidpi. Als het dan wel gewoon scherp is met de juiste afbeelding gaat er bij Firefox toch iets fout.

[crisp]

Misschien dat min-resolution met de dppx unit wel werkt, maar dat zouden we moeten testen (zie https://www.w3.org/blog/C...ebkit-device-pixel-ratio/)

[ACM]

Vooralsnog niet eenvoudig te fixen, als het niet al vanzelf gefixed is in de browser.