www.rottentomatoes.com - A zoomed-in version of the page is displayed

[webcompat-bot]

URL: https://www.rottentomatoes.com/celebrity/william_friedkin

Browser / Version: Firefox Mobile 69.0
Operating System: Android
Tested Another Browser: No

Problem type: Design is broken
Description: Text overflows beyond the screen of my phone (moto G6)
Steps to Reproduce:

Browser Configuration

• None

From webcompat.com with ❤️

[cipriansv]

Thanks for the report,
I was indeed able to reproduce the issue. A zoomed-in version of the page is displayed.

Tested with:
Browser / Version: Firefox Preview 2.0.0 (Build #12610151), Chrome Mobile 77.0.3865.73
Operating System: Huawei P10 (Android 9.0) - 1080 x 1920 pixels (~432 ppi pixel density)

This is the web page displayed in Firefox Preview:

And this is the web page displayed in Chrome:

The issue is also reproducible on Firefox Nightly Mobile 68.2a1 (2019-09-18).

[karlcow]

no issue with the viewport

This is because of this table which is larger than the viewport, and then makes it wider.

<table class="filmography__table">
   …content cut…
</table>

when we remove it, everything fits. On Chrome it is larger too but somehow there's a kind of overflow scroll on it.

.filmography__table--scrollable {
    overflow: scroll
}

but this is not working because parent elements are wider and took the size of the table. flexbox?

.layout {
	display: flex;
	justify-content: space-between;
}

.layout__column--main {
	flex: 3;
	width: 100%;
}

This is fixable with

/* default.5ef42a8fdf8.css | https://www.rottentomatoes.com/assets/pizza-pie/stylesheets/bundles/roma/layouts/default.5ef42a8fdf8.css */

.layout__column--main {
  /* flex: 3; */
  flex: 3 1 auto;
}

pushing to needscontact and adding it to the seeAlso of https://bugzilla.mozilla.org/show_bug.cgi?id=1316534

[wisniewskit]

I can't reproduce that issue on Fenix or Fennec, though their layout is still a little wider than the screen in places in Firefox compared to Chrome. That difference boils down to this CSS:

.layout__column--main {
    flex: 3;
    width: 100%;
}

If I add flex-basis:auto, then Firefox works fine (the default is 0% on Firefox). This was a recent spec-update, IIRC. They can simply add a CSS rule to their stylesheet to future proof things:

.layout__column--main {
  flex-basis: auto;
}

I've just contacted them via their email form for that.

[wisniewskit]

Quick update: @dholbert thinks that the issue I discovered above could also be bz1316534.

[softvision-oana-arbuzov]

The issue has been fixed. The layout fits properly on the page now.

Tested with:
Browser / Version: Firefox Nightly 90.0a1 (🦎 90.0a1-20210527092758)
Operating System: Google Pixel 5 (Android 11) - 1080 x 2340 pixels, 19.5:9 ratio (~432 ppi density), Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)