bigthink.com - Text on the page is garbled

[webcompat-bot]

URL: https://bigthink.com/progress/a-new-philosophy-of-progress-jason-crawford/

Browser / Version: Firefox Mobile 107.0 Operating System: Android 13 Tested Another Browser: Yes Chrome

Problem type: Design is broken Description: Items are overlapped Steps to Reproduce: Text and images intermittently overlap. Also page top animation causes scroll lag.

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20220923093059
• channel: nightly
• hasTouchScreen: true
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[softvision-raul-bucata]

We appreciate your report. I was able to reproduce the issue on an Android 11 device, but not on an Android 12 device. This might be dependent on the viewport and size of the screen, as some elements (images) are not placed as expected, overlapping other text elements, making the whole text to be garbled:

Tested with:

Browser / Version: Firefox Release 105.1.0 (2015904299-🦎105.0-20220915150737🦎 )/ Firefox Nightly 107.0a1 (2015906187-🦎107.0a1-20220925093059🦎)/ F Chrome Mobile Version 105.0.5195.124 Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density) Operating System: Google Pixel 3 (Android 12) -1080 x 2160 pixels, 18:9 ratio (~443 ppi density)

Notes:

1. Reproducible regardless of the status of ETP.
2. Reproducible on the latest build of Firefox Nightly and Release.
3. Works as expected using Chrome:

Moving this to NeedsDiagnosis for further investigations.

[qa_39/2022]