1827090 - CNN layout on mobile often causes the first ad to overlay text following it (in AMP pages)

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Randell Jesup [:jesup] (needinfo me)]

In Fenix, on a load of an AMP article where the first ad isn't visible, when you scroll down to it often the first ad will overlap the text following it. This includes reloads if the viewport is at the top of the screen, but if the ad is visible and you reload it normally doesn't overlap. This has been going on for years on CNN on mobile, on almost all articles. It doesn't seem to happen on desktop, even if you narrow the viewport until the ad is offscreen (similar to mobile).

Comment 1

[David Shin[:dshin]]

Attachment: Ad cutting off content on Pixel 7

Took a few tries to get ads working, had to load a new profile (?) to get ads showing reliably. Here is a case of ad cutting out content, using a different article (Just picked a different one from the reporter's while trying different things).

Comment 2

[David Shin[:dshin]]

Attachment: Same article on PC with another ad

As reporter mentioned, the ad does not cut off content; however, the ad does look cut off.

Comment 3

[David Shin[:dshin]]

If I toggle the following on PC:

.i-amphtml-layout-size-defined {
  overflow: hidden !important;
}

It behaves like mobile.

Comment 4

[David Shin[:dshin]]

Managed to catched it using USB debugging (Thanks :dholbert!). The root cause seems to boil down to:

// ...
.ad-wrapper, .livestory-ad-wrapper {
  text-align: center;
  height: 250px;
}
// ...
<div class="ad-wrapper">
<amp-list width="auto" height="250" layout="fixed-height" src="..." class="i-amphtml-element i-amphtml-layout-fixed-height i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout" style="height: 328px;" i-amphtml-layout="fixed-height">

amp-list has attribute height set to 250 but CSS height is 328, which causes the overlap.

Conversely, on Desktop in responsive mode, attribute height and CSS height match.

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:jfkthame, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 6

[Daniel Holbert [:dholbert]]

[jfkthame's out this week; stealing needinfo]

I know I've encountered this issue in the past, and I did some minor investigation when I did hit it; I faintly recall hitting the same issue in Chrome-on-Android but I'm not entirely sure & don't trust my memory.

In any case: Testing today, with the article in comment 1, I've only gotten ads to show up on my phone twice, and I've never encountered the overlapping-content issue in my tests today. (I'm using a Google Pixel 6a, for what it's worth.) The first ad that I saw was the England Tour Packages one that David screenshotted on desktop, and then I got zero ads for a while (just a blank reserved space), and then I got a squarish Chase Sapphire ad, and now I'm getting no ads again.

(observation & shot in the dark: I do notice that the nearly-square-aspect-ratio Chase Sapphire ad that I saw is skinnier than the available width, which is a different experience from the similar-aspect-ratio ad that David screenshotted in comment 1, where the ad expanded to fill the available width. I wonder... in whatever logic that the site uses to compute their overly-large style="height:..." value that David noticed, maybe there was some sort of issue with aspect-ratio calculations where the site was expecting e.g. nearly-square ads to be shrunk & letterboxed [as they are for me so far], but instead the site inadvertently ended up letting the ad be sized to fit the available width, and they used that to measure the appropriate height, and that ended up being too tall?)

David and Randell: if you can still reproduce this, could you double-check whether you see the same issue in Chrome on the same device?

It's unfortunate that this is so hard to test (at least for me and it sounds like for David) due to ads showing up so infrequently, even with no adblocker & with tracking protection turned off & even trying in private browsing mode with no cookies/state.)

Comment 7

[Daniel Holbert [:dholbert]]

Attachment: screenshot on Daniel's Pixel 6a (nearly-square aspect ratio ad, letterboxed with blank space on the sides, no overlapping-content issues)

Comment 8

[Daniel Holbert [:dholbert]]

See my just-posted screenshot for an example of what I was talking about with a nearly-square aspect ratio ad (in this case for a Citi card), which is nicely sized to fit the height constraint rather than filling the available width. Compare this against Comment 1 where David's got a similar-aspect-ratio ad which seems to fill the available width, and ends up too tall & stomps on content as a result.

Comment 9

[David Shin[:dshin]]

Attachment: Chromium 112, ad cut off initially

That's strange. On my Pixel 7 with Chromium 112, I see the ad cut off initially but when I took that screenshot and came back to it, the ad ended up blocking the article like we end up.

Comment 10

[David Shin[:dshin]]

Attachment: Chromium 112, ad cutting off article

Comment 11

[Daniel Holbert [:dholbert]]

Given comment 10 (which matches my faint recollection in comment 6), I think we can close this as not-Firefox-specific. It seems to just be an intermittent issue with AMP ads (on CNN at least) in general, affecting Chromium browsers as well.

Comment 12

[Daniel Holbert [:dholbert]]

(It's nice that we captured the actual styles in comment 4, too, making it clearly a site issue, with the ad-wrapper container element having height: 250px vs. the actual ad inside of it having larger style="height: 328px;", clearly overflowing by-design (presumably by accident). That adds weight to the "site-issue, not-Firefox-specific" assessment as well.)