Open Bug 1921230 Opened 10 months ago Updated 5 months ago

archive.is - The page footer is overlapped by the lower part of the page

Categories

(Web Compatibility :: Site Reports, defect, P2)

Product:
Web Compatibility
Component:
Site Reports
Platform:
ARM
Android
Type:
defect

Tracking

(Webcompat Score:5, Webcompat Priority:P2, firefox130 affected, firefox132 affected)

Project Flags:
Webcompat Score 5
Webcompat Priority P2
Tracking Flags:
Tracking Status
firefox130 --- affected
firefox132 --- affected

People

(Reporter: rbucata, Unassigned)

References

(Depends on 1 open bug,
URL
)

Details

(Keywords: webcompat:platform-bug, webcompat:site-report, Whiteboard: [webcompat-source:web-bugs])

User Story

platform:android
impact:content-missing
configuration:general
affects:all
branch:release
diagnosis-team:layout

Environment:
Operating system: Android 14
Firefox version: Firefox 130.0.1

Steps to reproduce:

  1. Navigate to: https://archive.is/wmtoi
  2. Scroll the page towards the page footer and observe

Expected Behavior:
The page footer is not overlapped

Actual Behavior:
Items are overlapped

Notes:

  • Reproduces regardless of the status of ETP
  • Reproduces in Firefox Nightly, and Firefox Release
  • Does not reproduce in Chrome

Created from https://github.com/webcompat/web-bugs/issues/142049

status-firefox130: --- → affected
status-firefox132: --- → affected
Severity: -- → S3
User Story: (updated)
Keywords: webcompat:needs-diagnosis
Priority: -- → P2

This is font inflation kicking in and increasing the size of text, such that it overshoots the specified px-valued height of the grid row in the grid that contains it, I think.

In particular, the overlap disappears if I do either of the following things:

  • untick the grid-template-rows declaration in devtools
  • turn off "automatic font sizing" in the Accessibility section of the Firefox-for-Android settings UI (disabling font inflation).

We could conceivably ship an intervention here to toggle text-size-adjust: none in cases where we run into this; in this case that'd probably be the original site which is...
https://www.haz.de/bauen-und-wohnen/wie-ich-von-der-gastherme-auf-die-waermepumpe-umstieg-und-dabei-reichlich-nerven-liess-SD5HOC2XLFH4BD2NOMVCRC2AMA.html
...rather than archive.is which is just a snapshotting service.

(We can't generally deploy interventions on archive.is, I imagine, without our intervention logic having insight into the snapshotted URL which might be complex to have it discover.

The aforementioned grid-template-rows decl is specifically this, which is hardcoded in the source here:

grid-template-rows:0px 0px 16px 4831.86px 1655.48px 286px

That 4831.86px height in the middle there is the relevant size here -- it just-so-happens to be the precise height that the article text has in desktop Firefox (and probably all browsers), with the particular text that's used and the particular web-fonts that the site provides.

If the article text happens to be larger than that size, then it trivially overflows beyond the fixed-size grid row here. And in this case, font inflation kicks in and does make the text substantially larger than it otherwise would be, and so the article text as-a-whole ends up much taller than 4831.86px, and trivially overflows (and overlaps the following content as a result).

I filed bug 1928286 on this general category of problem.

Depends on: 1928286
Keywords: webcompat:needs-diagnosis → webcompat:platform-bug
Webcompat Priority: --- → P2
Webcompat Score: --- → 5
You need to log in before you can comment on or make changes to this bug.