www.buienradar.nl - Page is not rendered correctly

[webcompat-bot]

URL: https://www.buienradar.nl/weer/schinveld/nl/2747550/5daagse

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

Problem type: Design is broken Description: Items not fully visible Steps to Reproduce: Probleem starts after last update. Page load correct in Chrome but not in Firefox. After the last update fonts are also very large in all pages. Also not able to upload Screenshot. I give up after tryed 3 times.

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-raul-bucata]

We appreciate your report. I was able to reproduce the issue using Firefocus and on the latest Firefox Nightly. The page is not rendered as expected, with misaligned items and cropped layout:

Focus:

Firefox:

Tested with: Browser / Version: Firefox Nightly 93.0a1 (2015828715 -🦎93.0a1-20210817094606🦎) / Firefox Focus 91.2.0 (🦎91.0.1-20210816143654🦎) Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density)

Notes:

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

Moving this to NeedsDiagnosis for further investigations.

[ksy36]

The issue is no longer reproducible.

[softvision-raul-bucata]

@ksy36 It seems that this might be specific for devices running Android 11 or lower, but working as expected using an Android 12 device:

A11:

A12:

Tested with: Browser / Version: Firefox Nightly 98.0a1 (2015862123 -🦎98.0a1-20220207065816🦎) 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)

Reopening the issue for further investigations.

[inv_06/2022]

[ksy36]

Thanks @softvision-raul-bucata. I've checked on my old device with Android 6 as well, same result as Android 12 :(

@karlcow @denschub any luck reproducing this?

[karlcow]

I have no issues on Android 11 with a pixel 2.

[softvision-raul-bucata]

The issue is still reproducible on Android 11 or lower:

Tested with:

Browser / Version: Firefox Release 102.2.1 (2015891003-🦎102.0.1-20220705093820🦎 )/ Firefox Nightly 104.0a1 (2015893339-🦎104.0a1-20220720095935🦎)/ 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_29/2022]

[wisniewskit]

This isn't reproducing for me on any of my phones or responsive design mode. I also don't see anything obvious in their design which would indicate that an ad might be placed in that location, so I'm stuck here.

[softvision-raul-bucata]

The issue is still reproducible on Android 11 or lower devices:

Tested with:

Browser / Version: Firefox Nightly 106.0a1 (2015900811-🦎106.0a1-20220827173411🦎) 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_35/2022]

[denschub]

Okay so I spent 2 hours trying to debug this, including

• Testing with various different UA strings, including a string indicating old android versions
• Testing on as many devices as I can get my hands on
• Testing different Android Emulator configs with different screen sizes, display densities, android versions, ...

I can't get this to break. At all. I have no idea what's causing this. The concerning thing is that this isn't a one-off report, we've got four - two on Android 12 (#107676, #104167), and two others (excluding this) on other versions (#91954, #55885). There clearly is something wrong.

Since this report is more than a year old by now, I'm almost tempted to just close this as "worksforme", but clearly it doesn't work for everyone. I'll ask in the Mozilla Slack if someone is able to reproduce this...

[karlcow]

@denschub it doesn't reproduce on Safari. but my hunch is that it is related to flex-wrap and percentage rounding. If they were changing the flex-wrap: wrap; in there by flex-direction: column;, I'm pretty sure the issue would not occur.

.rtable {
    display: flex;
    /* flex-wrap: wrap; */
    margin: 0 0 0 0;
    padding: 0;
    flex-direction: column;
}

Or switching to grid would help them a lot.

[tnikkel]

This seems to be a minimal testcase.

<!DOCTYPE html>
<html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.expanded-box-header{
    height:47px;
}
.header-text{
    line-height:47px;
    float:left;
    min-width:65%;
}
</style>
  <div class="expanded-box-header">
    <span class="header-text">D</span>
  </div>
  <div>
    This should be on the left
  </div>

Looks like the header-text span float leaks into the next div. Looks like the author is relying on the height of the containing div containing all of the floats height by setting the height of the containing div equal to the line height of the float. I guess the font on (some?) Samsung devices has the right metrics so that we run into this.