www.seedr.cc - Top section of the site does not fit the allocated page space

[webcompat-bot]

URL: https://www.seedr.cc/

Browser / Version: Firefox Mobile 98.0
Operating System: Android 11
Tested Another Browser: Yes Edge

Problem type: Design is broken
Description: Items are misaligned
Steps to Reproduce:
Website design is broken on firefox(android), but works as expected on firefox(windows).

View the screenshot

Browser Configuration

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

Thanks for the report, I was able to reproduce the issue. The right side of the site is truncated.

Note: The issue is not reproducible on Chrome.

Tested with:
Browser / Version: Firefox Nightly 98.0a1 (🦎 98.0a1-20220201093942)
Operating System: Google Pixel 5 (Android 12) - 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)

Moving to Needsdiagnosis for further investigation.

[qa_05/2022]

[denschub]

That site has an explicit

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

which means the viewport will be as wide as the device, without any fitting/scaling/zooming, and the user will be unable to zoom. At the same time, div#welcome-description-container has a fixed-width of 420px, hard-coded via CSS. So on a device that is narrower, like my testing device with a viewport width of 360px, ... too bad.

With all that being said, it clearly works in Chrome. I'm having a hard time understanding why it works in Chrome, and it appears like the Chrome devtools don't understand, either. Here is, for example, me highlighting the "Get Stuff Quickly & Easy" element in Chrome's DevTools:

And not only is the element also too wide, it doesn't even line up with what's being drawn. I initially suspected this to be a browser bug since I'm usually using Chrome Canary, but this also happens if both ends are on Chrome release. So, I dunno.

Confusingly, this doesn't get any better on Desktop. Here are the Chrome devtools in RDM:

And as you'll notice, the viewport is set to 360px, but it's showing a 430px wide element just fit on screen. Ultimately, I figured it out, and I probably should have realized that earlier... this site sets

@media (max-width: 830px) {
  #description-block {
    margin-top: 35px;
    text-align: center;
    zoom: 0.8;
  }
}

and yeah, I guess that's one way to make your content fit on mobile screens. Anyway, zoom isn't supported on Firefox, that'd be a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=390936 - I'll close this bug as such.