Almanac.httparchive.org: Home page text contrast issue on mobile when zoomed

[rviscomi]

Got this UX issue in a DM:

The user is on a mobile device with the page zoomed in.

cc #303

[catalinred]

cc https://github.com/HTTPArchive/almanac.httparchive.org/issues/413#issuecomment-552175467 as well

Curious about how to reproduce the above zoomed in behavior.

[rviscomi]

Yeah I wasn't able to reproduce this in Dev Tools.

[rviscomi]

It seems the OS-level magnification settings need to be configured to 160% to trigger this bug.

[catalinred]

In case it helps, I did try text scaling on iOS and wasn't able to reproduce this behavior, the above screenshot looks like is taken on an Android phone.

Either way, IMO this issue is due to the fact that the main background image intro-background-fit.png is set on the body and not on the HTML element that wraps the above text and button, e.g. <section class="intro-container">. Related to #485

[rviscomi]

Yeah, I think one of the reasons for doing it this way is because it also needs to appear behind the <header>.

[mikegeyser]

They are definitely related, but even if it was set on the intro-container it would still cut off the text, wouldn't it? Because the header image is set to a fixed background-size.

[catalinred]

@rviscomi yes, technically the current header content and intro-container should be wrapped together in HTML to apply that background somehow, therefore to avoid zooming issues.

@mikegeyser those ‘background-size’ hardcoded px unit values are indeed part of the issue.

Will try to work on a solution tomorrow (I’m on EET timezone) and keep you updated.

[rviscomi]

Related #512