dashingdon.com - Text no longer fits the screen after changing the text size to bigger

[webcompat-bot]

URL: https://dashingdon.com/play/wildelight/mind-blind/mygame/

Browser / Version: Firefox Mobile 88.0
Operating System: Android 10
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items not fully visible
Steps to Reproduce:
When you change the text size to bigger in the game settings the text does not fit the screen and you can't zoom out. It happens to every choice script game that I tested.

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20210406185740
• channel: beta
• 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-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue. The text size can be changed from "Settings>Make the text bigger" option.

Note: The issue is not reproducible on Chrome.

Tested with:
Browser / Version: Firefox Nightly 210411 (🦎 89.0a1-2021041009144
Operating System: Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

Moving to Needsdiagnosis for further investigation.

[wisniewskit]

This is because they add zoom:1.1 to the body tag in Chrome, but max-width:618.182px; transform-origin:center top 0px; transform:scale(1.1) in Firefox (if I save the HTML that Firefox ultimately gets and load it in Chrome, the same problem appears there).

Basically, the body tag becomes wider than the viewport. So they can fix this on mobile by changing the max-width to 90.9vw (that is, 1.0 divided by their scale factor of 1.1) , which ensures that the width of the viewport compensates for the scaling factor.

But since they also wish to limit the width to 618.182px on desktop, then can use this instead:
max-width:min(90.9vw, 618.182px) (with the value adjusted for the current scale as mentioned above). This will also ensure that the text fits in a narrow desktop window.

With this change, they can probably also drop their use of zoom in this case and simplify their code so it only uses transforms.

[webcompat-bot]

Generate outreach template

[reinhart1010]

If you need support, please message dashingdon on the Choice of Games forum.

It seems it's the only way to go.

[karlcow]

@softvision-raul-bucata
Did they fix it?

[softvision-raul-bucata]

@karlcow The issue is still present:
We appreciate your report. I was able to reproduce the issue.

Tested with:

Browser / Version: Firefox Nightly 114.0a1 (2015948131-🦎114.0a1-20230501093846🦎)
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)

[inv_18/2023]