1939668 - At frameo.com, logos are clipped in "Seen on" section, in Firefox for Android

Status: NEW

(Web Compatibility :: Site Reports, defect, P3)

Description

[Daniel Holbert [:dholbert]]

Attachment: screenshot (from RDM) showing the clipping

STR:

1. Load https://www.frameo.com/ in Firefox for Android (or on desktop with RDM, using an Android device profile (e.g. Galaxy Note 20) from the RDM dropdown-menu).
2. If you get a cookie popup, click Reject so that you can see the page.
3. Scroll down to the "Seen on" carousel, and look carefully at the logos of the news organizations listed there (Forbes, CNET, Go Morgen Danmark)

ACTUAL RESULTS:
The bottom edge of most of these logos are clipped.

EXPECTED RESULTS:
No such clipping.

Looking in DevTools, it seems the site has an element with overflow:hidden and a dynamically-added height attribute, which seems to be smaller in Firefox for some reason. To understand the issue, I think we need to debug the JS that runs during pageload here to see how they determine the height value to use.

In Firefox, the site gives that element height: 51.9333px; as shown here:

<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 51.9333px;">

In Chrome, the site instead gives it height: 73.3281px;:

<div class="bx-viewport" style="width: 100%;overflow: hidden;position: relative;height: 73.3281px;">

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot (from RDM) showing the most-clipped logo, "Go morgen Danmark"

Comment 2

[Daniel Holbert [:dholbert]]

Hmm, I can reproduce in Chrome (using their RDM mode) if I throttle my network connection (settling throttling to 3G with "disable cache" checked).

So maybe there site's logic has a race condition that's influenced by network conditions as well as UA-specific behaviors, and on my regular fast connection, Firefox ends up on the wrong side of that race condition, whereas Chrome only ends up on the wrong side of it when I throttle.