www.anandtech.com - The font size changes after zooming and then reloading the page

[tbruckschlegel]

URL: https://www.anandtech.com/show/16069/samsung-variable-refresh-rate-display-explained-vrr-note20-ultra

Browser / Version: Firefox Mobile 81.0
Operating System: Android
Tested Another Browser: Yes Other

Problem type: Something else
Description: font size changes on reload after zooming totally out of the page
Steps to Reproduce:
It's happening on the article view page https://www.anandtech.com/show/16069/samsung-variable-refresh-rate-display-explained-vrr-note20-ultra

not on the front page:

-load the page
-zoom totally out
-reload the page
-observe the font size

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20200901203141
• channel: beta
• hasTouchScreen: true

From webcompat.com with ❤️

[tbruckschlegel]

I forgot, you have to activate the accessibility option to allow zooming on any page.

[cipriansv]

Thanks for the report, but this is not a compatibility issue since you are altering the browser's default settings by activating the accessibility settings.

Please file an issue on https://github.com/mozilla-mobile/fenix/issues/

For this project, we try to focus our effort on website layouts, features, or content that works as expected in one browser but not in another, using the browser default settings

Closing the issue as non-compat.

[tbruckschlegel]

Hey Ciprian, I did some more testing. Seems like even with default settings the issue appears, but you have to load the page, then zoom in and out and hit reload. Von: Ciprian Ciocan <notifications@github.com> Gesendet: Freitag, 11. September 2020, 16:06 An: webcompat/web-bugs Cc: tbruckschlegel; Author Betreff: Re: [webcompat/web-bugs] www.anandtech.com - see bug description (#57952) Thanks for the report, but this is not a compatibility issue since you are altering the browser's default settings by activating the accessibility settings. Please file an issue on https://github.com/mozilla-mobile/fenix/issues/ For this project, we try to focus our effort on website layouts, features, or content that works as expected in one browser but not in another, using the browser default settings Closing the issue as non-compat. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[cipriansv]

Thanks @tbruckschlegel for the update.

I was indeed able to reproduce the issue. The font size decreases after reloading the page compared to the first time I accessed the page.

Tested with:
Browser / Version: Firefox Nightly 200913(🦎 82.0a1-20200908095243), Chrome Mobile 85.0.4143.81
Operating System: OnePlus6 (Android 10) - 1080 x 2280 pixels (~402 ppi pixel density)

Moving the issue to needsdiagnosis.

[karlcow]

Initial load gives a 14px font-size, then a slight zoom on the page without even reloading makes a 16.1px. But that seems to be the result of something else. The content is wider than the viewport, and the notification bell icon is hidden on the right outside of the viewing area once loaded.

They can fix it in two ways:

/* Inline #20 | https://www.anandtech.com/show/16069/samsung-variable-refresh-rate-display-explained-vrr-note20-ultra */

pre {
  overflow: scroll;
}

or

/* Inline #20 | https://www.anandtech.com/show/16069/samsung-variable-refresh-rate-display-explained-vrr-note20-ultra */

pre {
  white-space: pre-wrap;
}

The notification icon will come back into places and the content will be less wide.

another issue is this.

/* css | https://www.anandtech.com/Content/css?v=813oG_8nNyCZXz7kVAe5eS_3v4I3z_2YsaGf_j29ZEg1 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  /* font-size: 100%; */
  /* font: inherit; */
}

The font: inherit kind of change the size when zooming in.