[bug] Erg verschillende tekstgrootes mobiel

[thomas479]

Ik gebruik al sinds jaar en dag op mijn mobiel de desktop versie van Tweakers (Weergave forceren "Desktop schermen (16" en groter)"). Dit werkt voor mij erg prettig, gezien de tracker altijd zichtbaar is.

Sinds de nieuwe layout voor nieuwsitems kloppen de lettergroottes niet meer, de tekst van het artikel is bijna twee keer zo groot als de rest van de tekst op de pagina (o.a. in de tracker).

Zie onderstaande afbeelding:


Ook als ik inzoom (met dubbeltik, dus 100%) blijven de letters abnormaal groot.
Ik snap dat ik waarschijnlijk een van de weinige users ben die middels deze weergave de site bekijken op de mobiel, maar het zou tof zijn als het gefixt kan worden!

Het gaat trouwens om Chrome Beta 60 op Android 7.1.2

[ Voor 3% gewijzigd door thomas479 op 20-06-2017 20:38 ]

[crisp]

Ik heb geen idee waarom de inhoud niet goed meeschaalt; dat lijkt me iets dat de browser doet? Ik ben bang dat wij hier weinig aan kunnen doen, maar wellicht is er een instelling in je browser voor.

[Feanathiel]

Wellicht related, op de desktop vind ik het ook best groot aan het worden.

Nu:


Vs eerder:

[Mixpower]

Feanathiel schreef op dinsdag 20 juni 2017 @ 18:51:
Wellicht related, op de desktop vind ik het ook best groot aan het worden.

Nu:
[afbeelding]

Vs eerder:
[afbeelding]

Hier hetzelfde op IE, sinds de update van Tweakers ineens hele grote letters en de tekst in een artikel word gecentreerd inplaats van uitgelijnd naar links.

[iMonnie]

Het zelfde hier op mijn mobiel, android chrome. Vond het er al zo gekkig uitzien.

[thomas479]

crisp schreef op dinsdag 20 juni 2017 @ 13:37:
Ik heb geen idee waarom de inhoud niet goed meeschaalt; dat lijkt me iets dat de browser doet? Ik ben bang dat wij hier weinig aan kunnen doen, maar wellicht is er een instelling in je browser voor.

Ik heb geen gerelateerde instelling kunnen vinden, echter ondervind ik het probleem met de grote tekst niet als ik de weergave op 4k forceer.
Onderstaand wat meer screenshots voor de vergelijking, het lijkt op een of andere manier aan toch aan de styling kant van de 16" en groter stylesheets te liggen, gezien het bij de 4k variant niet gebeurt. Hierbij neem ik wel aan dat qua opbouw van de site er geen verschil is tussen deze variaties.

[crisp]

@Feanathiel @Mixpower @iMonnie dat is geen bug, zie plan: Nieuwe lay-out voor nieuws en reviews

[crisp]

thomas479 schreef op dinsdag 20 juni 2017 @ 20:36:
[...]


Ik heb geen gerelateerde instelling kunnen vinden, echter ondervind ik het probleem met de grote tekst niet als ik de weergave op 4k forceer.
Onderstaand wat meer screenshots voor de vergelijking, het lijkt op een of andere manier aan toch aan de styling kant van de 16" en groter stylesheets te liggen, gezien het bij de 4k variant niet gebeurt. Hierbij neem ik wel aan dat qua opbouw van de site er geen verschil is tussen deze variaties.

[afbeelding]

[afbeelding]

Afaik doen we nog helemaal niets speciaals voor 40"+, dus die instelling zou hetzelfde resultaat moeten geven als de instelling voor 16"+

Edit: ik kan het inderdaad reproduceren. Ik duik er morgen even wat dieper in

[ Voor 4% gewijzigd door crisp op 20-06-2017 21:56 ]

[Hero of Time]

@crisp, wordt er toevallig ook een ander font-family gebruikt? Op m'n werk ziet het er namelijk lelijk uit (en ja, ik mis een paar fonts, maar dat is geen reden voor het lelijk uit zien opeens, thuis lijkt het onveranderd). Dat zou dan namelijk ook wat kunnen verklaren waarom men het er anders uit vind zien.

[thomas479]

crisp schreef op dinsdag 20 juni 2017 @ 21:54:
[...]

Afaik doen we nog helemaal niets speciaals voor 40"+, dus die instelling zou hetzelfde resultaat moeten geven als de instelling voor 16"+

Dat is ook wat ik zou verwachten inderdaad.

Ik denk dat er aan jullie kant een wijziging is geweest, waardoor Chrome nu denkt dat hij de tekst in koeienletters moet gaan tekenen. Ik heb namelijk even gekeken via Chrome Remote Debugging, maar van de pixel groottes lijkt vrij weinig te kloppen met wat ik op mijn beeld zie. De grootte van de #contentArea is 14px, maar op mijn beeld ziet het er uit als 24px. Het rare is dat de menu items wel op de juiste grootte staan, ookal zouden deze groter moeten zijn met een font-size van 15px.

[crisp]

Hero of Time schreef op dinsdag 20 juni 2017 @ 22:06:
@crisp, wordt er toevallig ook een ander font-family gebruikt? Op m'n werk ziet het er namelijk lelijk uit (en ja, ik mis een paar fonts, maar dat is geen reden voor het lelijk uit zien opeens, thuis lijkt het onveranderd). Dat zou dan namelijk ook wat kunnen verklaren waarom men het er anders uit vind zien.

Nee, we gebruiken nog steeds dezelfde fonts (roboto voor headings, arial voor de rest).

[Hero of Time]

crisp schreef op dinsdag 20 juni 2017 @ 22:17:
[...]

Nee, we gebruiken nog steeds dezelfde fonts (roboto voor headings, arial voor de rest).

Dan zal ik eens met inspect element uitzoeken wat er mis is, plaatje maken en topic openen hier indien nodig.

[crisp]

De grotere fontsize in (mobile) chrome komt door een feature genaamd 'font size boosting'. Gelukkig is er een css-property om dat tegen te gaan, dus die heb ik zojuist ook op de content-div van onze artikelen gezet

[Hero of Time]

Over font-size gesproken, dat is wat ik zie. Thuis, op m'n HTPC, heb ik nog wat extra css om dat te veranderen ivm afstand tot de TV. In m'n standaard css niet en het is met de laatste iteratie verandert naar 14. Als ik dat uitzet en terug laat vallen naar 13, dan ziet het er weer fatsoenlijk uit.

Het zou zo maar kunnen zijn dat die font size boosting waar je 't over hebt vanaf 14 gaat werken. Of er is iets anders aan de hand waarom het opeens gebeurt.

[thomas479]

crisp schreef op woensdag 21 juni 2017 @ 09:14:
De grotere fontsize in (mobile) chrome komt door een feature genaamd 'font size boosting'. Gelukkig is er een css-property om dat tegen te gaan, dus die heb ik zojuist ook op de content-div van onze artikelen gezet

Tof bedankt! Snelle reacties overigens, kunnen andere bedrijven best van leren

[crisp]

Hero of Time schreef op woensdag 21 juni 2017 @ 10:26:
Over font-size gesproken, dat is wat ik zie. Thuis, op m'n HTPC, heb ik nog wat extra css om dat te veranderen ivm afstand tot de TV. In m'n standaard css niet en het is met de laatste iteratie verandert naar 14. Als ik dat uitzet en terug laat vallen naar 13, dan ziet het er weer fatsoenlijk uit.

Het zou zo maar kunnen zijn dat die font size boosting waar je 't over hebt vanaf 14 gaat werken. Of er is iets anders aan de hand waarom het opeens gebeurt.

Het zou best kunnen dat het vergroten van de font-size nu ineens die boost ook triggert. Ik heb me verder niet verdiept in het algoritme, temeer daar het ook gewoon browser-specifiek is. Het is in ons geval gewoon onwenselijk, en gelukkig kon het 'uit'

[Hero of Time]

Waarom is de tekst 1 punt groter gemaakt eigenlijk? De comments zijn dat niet, de tracker is dat niet, eigenlijk niets op de site is qua tekst grootte (merkbaar) verandert, op artikels na.

[crisp]

Hero of Time schreef op woensdag 21 juni 2017 @ 12:59:
Waarom is de tekst 1 punt groter gemaakt eigenlijk? De comments zijn dat niet, de tracker is dat niet, eigenlijk niets op de site is qua tekst grootte (merkbaar) verandert, op artikels na.

Omdat de contentbreedte ook iets groter is gemaakt.

[Hahn]

crisp schreef op woensdag 21 juni 2017 @ 13:30:
[...]

Omdat de contentbreedte ook iets groter is gemaakt.

Je hebt nu alleen wel flinke inconsistentie qua fontsizes.

[crisp]

Hahn schreef op woensdag 21 juni 2017 @ 13:32:
[...]

Je hebt nu alleen wel flinke inconsistentie qua fontsizes.

Klopt, maar om daar meteen site-wide iets aan te doen is gewoon een veels te grote klus...

[alex3305]

crisp schreef op woensdag 21 juni 2017 @ 09:14:
De grotere fontsize in (mobile) chrome komt door een feature genaamd 'font size boosting'. Gelukkig is er een css-property om dat tegen te gaan, dus die heb ik zojuist ook op de content-div van onze artikelen gezet

Vanwege het uitzetten van deze property is schaling nu niet meer mogelijk op de mobiele website. Met andere woorden, de artikelen van Tweakers respecteert niet meer mijn vergrotingsinstellingen. Dat verminderd de toegankelijkheid fors en zorgt voor een zeer inconsistente layout mbt bijvoorbeeld de reacties.

Als mensen 'last' hebben van font boosting, moeten ze in de browser en op het apparaat het zoomniveau aanpassen.

Edit voor de custom css houders:

Cascading Stylesheet:

#contentArea .centeredContent .article, .article, .article p { text-size-adjust: unset!important; max-height: none; }

zorgt ervoor dat de website geselecteerde zoomopties wel respecteert.

[ Voor 14% gewijzigd door alex3305 op 22-06-2017 18:02 ]

[Albinosaurus]

alex3305 schreef op donderdag 22 juni 2017 @ 18:00:
[...]

Vanwege het uitzetten van deze property is schaling nu niet meer mogelijk op de mobiele website. Met andere woorden, de artikelen van Tweakers respecteert niet meer mijn vergrotingsinstellingen. Dat verminderd de toegankelijkheid fors en zorgt voor een zeer inconsistente layout mbt bijvoorbeeld de reacties.

Als mensen 'last' hebben van font boosting, moeten ze in de browser en op het apparaat het zoomniveau aanpassen.

Edit voor de custom css houders:

Cascading Stylesheet:

#contentArea .centeredContent .article, .article, .article p { text-size-adjust: unset!important; max-height: none; }

zorgt ervoor dat de website geselecteerde zoomopties wel respecteert.

Ik heb hier ook last van inderdaad. Voor deze week was alles netjes in de font size die ik had ingesteld op mijn telefoon. Nu is alles behalve de artikeltekst op de frontpage zo waardoor er inconsistentie in de font sizes is en de artikelen voor mij onleesbaar zijn geworden.

Naar mijn idee heeft een goede website gewoon fonts die instelbaar zijn, gerelateerd aan elkaar mogen ze natuurlijk verschillen maar ze moeten allemaal wel meeschalen als je dat als gebruiker wenst. Ik heb deze problemen met mijn telefoon niet op sites van NOS of AD. Fixed sizes zijn nergens goed voor.

Edit: Custom CSS is voor mij niet beschikbaar maar dat zou imho ook niet nodig moeten zijn.

[ Voor 3% gewijzigd door Albinosaurus op 25-06-2017 10:50 ]

[alex3305]

En vandaag weer een edit moeten maken omdat de articles.css blijkbaar voor customcss wordt gerenderd. De volledige CSS die ik nu heb:

Cascading Stylesheet:

#contentArea .centeredContent .article, .article, .article p { text-size-adjust: unset!important; -webkit-text-size-adjust: unset!important; max-height: none!important; font-size:10pt; }

Heren devjes, graag ook accessibility testen, want dit is natuurlijk niets:

[alex3305]

Kick. Wordt hier nog aandacht aan besteed?

[Hero of Time]

alex3305 schreef op woensdag 6 september 2017 @ 23:59:
Kick. Wordt hier nog aandacht aan besteed?

Volgens plan: Releasenotes development iteratie #114 is er wel degelijk aandacht aan besteed. In hoeverre is het probleem er nog?

[crisp]

Het valt mij oo dat vooral de 'meta'-informatie onder de titel veel te groot is. Wellicht moeten we daar font-boosting ook voorkomen? Of is dat een resultaat van je custom css?

[alex3305]

@Hero of Time Het ligt niet aan de grootte van de titel en is dus nog niet opgelost. Die was iets te groot, maar daar kan ik langs scrollen. De tekst in het artikel schaalt niet meer mee door font-boosting. In tegenstelling tot de @crisp meta-tekst en titel die wel meeschalen. Door mijn custom css zet ik font boosting uit, zodat alles weer netjes meeschaalt en ik de artikelen weer kan lezen.

Dit is trouwens heel makkelijk te testen. Mijn stappen:
[list]
• Open Chrome op Android
• Open een artikel op Tweakers
• Zet bij Toegankelijkheid de lettergrootte op 170%
• Open een artikel op Tweakers
• Verwacht resultaat: tekst respecteert de ingestelde lettergrootte

[crisp]

Zet bij Toegankelijkheid de lettergrootte op 170%

Ah, nu snap ik pas wat je bedoelt....

Eens kijken wat daar dan precies misgaat...

Edit: blijkbaar heeft chrome z'n font-boosting algoritme alweer verbetert en kan de max-height op .article er ook wel weer uit. Dat zal ik eerdaags even fixen. Tot dan is dit overigens voldoende in je custom css:

Cascading Stylesheet:

.articleColumn.wide .article {
    max-height: none;
}

[ Voor 50% gewijzigd door crisp op 07-09-2017 12:36 ]

[alex3305]

Bedankt @crisp. Gelukkig is het vrij makkelijk met jullie in contact te komen en heb je workarounds met custom css. Bij andere websites is dit vaak een heel stuk lastiger.

[crisp]

alex3305 schreef op donderdag 7 september 2017 @ 20:46:
Bedankt @crisp. Gelukkig is het vrij makkelijk met jullie in contact te komen en heb je workarounds met custom css. Bij andere websites is dit vaak een heel stuk lastiger.

Wij zijn ook Tweakers natuurlijk