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

Status: RESOLVED FIXED

(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

Comment 6

[Ricardo Delgado Gomez]

Hello, new contributor here! I'll be submitting a patch for this bug soon.

Comment 7

[Ricardo Delgado Gomez]

Attachment: Bug 1952132 - Add a border-radius to new-tab broken-image tiles, for consistency with other tiles. r?nbarrett!

Comment 8

[Ricardo Delgado Gomez]

What tests do I need to run for this patch, if any?

Comment 9

[Daniel Holbert [:dholbert]]

At least one thing worth testing manually: if you haven't already done so, I'd suggest following the same steps that I laid out in comment 4-5. (Hopefully with your patch, you won't see the same sharp corners that are visible in my screencast there in whatever broken-image-fallback tiles you're able to trigger there.)

(Hopefully nbarrett can help you on whether there are automated tests worth running.)

Also, quick request - could you adjust the patch's commit message to describe the change instead of restating the bug-title? (Maybe something like:
"Add a border-radius to new-tab broken-image tiles, for consistency with other tiles"
or something along those lines.)

Thanks for the patch!

Comment 10

[Nathan Barrett [:nbarrett]]

(In reply to Ricardo Delgado Gomez from comment #8)

What tests do I need to run for this patch, if any?

The unit tests which you can get intructions on how to run here: https://firefox-source-docs.mozilla.org/browser/extensions/newtab/docs/index.html#running-tests

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1df91ccd4499
Add a border-radius to new-tab broken-image tiles, for consistency with other tiles. r=nbarrett,home-newtab-reviewers

Comment 12

[amarc]

https://hg.mozilla.org/mozilla-central/rev/1df91ccd4499