Add max-height to workaround Chrome on Android's font-boost making pages unreadable

[cesy]

There are certain pages that are unreadable in parts in Chrome on Android, including anything in format=light or more importantly site style. Mobile Chrome has a "feature" called font boost, where any paragraph over a certain length gets enlarged, leaving the rest of the site too small to read. This frequently applies, for example, to a journal post with comments. This is a problem. It applies both to any link from www.dreamwidth.org/mobile/read, and also to following a link from an email notification to a journal post where someone has chosen to display journal entries in site style, which is something I like to do quite often on my phone. Setting a large max-height should fix it. Discussed on http://dw-dev.dreamwidth.org/182633.html

[rahaeli]

Can you get a screenshot of your phone showing one of the unreadable pages, btw? (Just to give a sense of what's going on!)

[cesy]

[cesy]

That one just has subject and author tiny. I'll watch out for a public one with comments as that's even clearer.

[kaberett]

As far as I'm concerned you're welcome to use any of my public posts!
On 21 Feb 2016 17:20, "Cesy" notifications@github.com wrote:

That one just has subject and author tiny. I'll watch out for a public one
with comments as that's even clearer.

—
Reply to this email directly or view it on GitHub
#1698 (comment)
.

[azurelunatic]

Mine as well!

On Sun, Feb 21, 2016 at 9:21 AM, kaberett notifications@github.com wrote:

As far as I'm concerned you're welcome to use any of my public posts!
On 21 Feb 2016 17:20, "Cesy" notifications@github.com wrote:

That one just has subject and author tiny. I'll watch out for a public
one
with comments as that's even clearer.

—
Reply to this email directly or view it on GitHub
<
https://github.com/dreamwidth/dw-free/issues/1698#issuecomment-186862393>
.

—
Reply to this email directly or view it on GitHub
#1698 (comment)
.

[cesy]

Example where names are unreadable and reply/expand links are too small to hit without zooming:

[rahaeli]

Thanks! The screenshots make it a lot easier for me to picture what the problem is. :)

[kaberett]

Have a particularly egregious example:

[chrisboyle]

claim

[chrisboyle]

Unfortunately what was asked for doesn't achieve what was wanted. The max-height hack does disable font boost, but that just leaves all the text at the "unreadable" size. It's consistent, and you can zoom in, but you then need to scroll side to side to read a line of text. Furthermore, the hack makes the browser's Accessibility / Text Size setting do nothing. I don't think that's an improvement.

There is a semi-standardised way to disable this sort of thing: [-webkit-]text-size-adjust, but Chrome ignores it.

CSS does not have "min-font-size". One could imagine doing something like @media (max-width: 600px) { html * { font-size: 48px; } } and relying on the apparently established accessibility policy that styles should only adjust font sizes relatively (using ems). An initial unscientific test of that did not go well:

Seems to me the most correct way to make all the text bigger without the side-scrolling problem is to do the "stop pretending there's a huge viewport" thing that many pages on the site do already (but not the style=site / format=light ones that are the subject of this bug):

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

[chrisboyle]

Viewport device-width does fix all of these issues, but something would need doing about the top of the page:

[rahaeli]

Ugh. I'm not sure what the best solution to this is. Paging some people who might know a workaround: @afuna @deborahgu

[nfagerlund]

I think the s2foundation beta fixes this whole family of disgusting mobile Chrome issues.

[kareila]

In that case I will consider this closed! We can always come back to it if needed.