1952132 - New tab tile corners have sharp corners sticking beyond rounded corners, when image fails to load

Status: NEW

(Firefox :: New Tab Page, defect, P3)

Description

[Daniel Holbert [:dholbert]]

Attachment: screenshot

I don't have concrete STR here, but for whatever reason, I just ended up with a new-tab where two thumbnails failed to load -- and I noticed that specifically these two tiles have sharp corners -- see screenshot.

ACTUAL RESULTS: Sharp square corners (protruding beyond the rounded corners)
EXPECTED RESULTS: Rounded corners with no sharp square-corner protruding.

I'm on Linux Nightly 138.0a1 (2025-03-05) (64-bit)

Comment 1

[Daniel Holbert [:dholbert]]

Looking at the page in DOM inspector, it looks like this has something to do with the broken-image rendering that we show in this case.

For both of the thumnails that failed to load here, the DOM looks like this in DevTools inspector:

<div class="img-wrapper">
  <picture class="ds-image img use-transition loaded">
    <div class="broken-image"></div>
  </picture>
</div>

And the issue is that the broken-image element has a solid background, which leaks out past the border:

.ds-image img,
.ds-image .placeholder-image,
.ds-image .broken-image {
  background-color: var(--newtab-element-secondary-color);

For the tiles that do render with nice rounded corners, that comes from this style on their img elements:

.ds-card-grid .sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img {
  border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}

If I add that same border-radius declaration to the .broken-image CSS rule, then it fixes this bug, to my eye.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screencast showing fix by transplanting `border-radius` style from other tile images

Comment 3

[Daniel Holbert [:dholbert]]

See attached screencast to demonstrate a possible-fix being applied in devtools. (Watch the tile carefully to see the sharp square corners disappearing/reappearing as I add that border-radius style, and then disable/reenable that style.)

Comment 4

[Daniel Holbert [:dholbert]]

Here's one way to trigger this bad rendering on-purpose, to reproduce the issue and test potential fixes:
(1) Start Firefox with a fresh profile
(2) Open a new-tab (with the "Thought-provoking stories" section visible)
(3) Open DevTools (F12) and focus the Network tab
(4) Hard-reload the page (Ctrl+Shift+R). This should cause some requests to show up in your Network Devtools listing for img-getpocket.cdn.mozilla.net.
(5) Right-click one or more of the entries for img-getpocket.cdn.mozilla.net and choose "Block URL"
(6) Hard-reload the new-tab page again.

This should show a broken-image rendering like the screenshot in comment 0 (as long as the tiles are still present whose resources you blocked), so you can test that rendering and see if the corners are protruding or not.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: screencast showing how to reach the broken-image UI (so that you can reproduce the bug) on demand using network devtools