Closed Bug 1925924 Opened 1 year ago Closed 1 year ago

w3.nhk.or.jp - Missing elements from the page

Categories

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

Product:
Web Compatibility
Component:
Site Reports
Platform:
Desktop
Windows 10
Type:
defect

Tracking

(firefox131 affected, firefox133 affected)

Status:
RESOLVED FIXED
Tracking Flags:
Tracking Status
firefox131 --- affected
firefox133 --- affected

People

(Reporter: rbucata, Unassigned)

References

(Depends on 1 open bug,
URL
)

Details

(Keywords: webcompat:platform-bug, webcompat:site-report, Whiteboard: [webcompat-source:web-bugs][webcompat:sightline])

User Story

platform:windows,mac,linux,android
impact:content-missing
configuration:general
affects:all
branch:release
diagnosis-team:layout

Attachments

(2 files)

20241021_110321.mp4
2.59 MB, video/mp4
Details
screenshot comparing the Jan 2025 redesign of the site in Firefox (left) vs Chrome (right), with the icons correctly showing up now
551.59 KB, image/png
Details

Environment:
Operating system: Windows 10
Firefox version: Firefox 131.0

Steps to reproduce:

  1. Navigate to: https://www3.nhk.or.jp/sports/program/
  2. Scroll the page and observe the broadcasting time next to the shows

Expected Behavior:
Icons are rendered ("BS", "G", etc)

Actual Behavior:
Icons are missing

Notes:

  • Reproduces regardless of the status of ETP
  • Reproduces in Firefox Nightly, and Firefox Release
  • Does not reproduce in Chrome

Created from https://github.com/webcompat/web-bugs/issues/142992

Attached video 20241021_110321.mp4 —
status-firefox131: --- → affected
status-firefox133: --- → affected

That's an SVG, and the <img> tag has width and height specified, yet Firefox is rendering it as 0x0px small

Severity: -- → S2
User Story: (updated)
Keywords: webcompat:needs-diagnosis
Priority: -- → P2

The img here has max-width:max-content which we're treating as 0 for some reason -- maybe because the SVG file itself has no declared width or height?

If I undo that by e.g. setting max-width:none, then the image shows up just fine.

Reduced testcase which is blank in Firefox vs. shows the image in Chrome:

data:text/html,<img style="max-width: max-content" src="https://www.nhk.jp/assets/images/broadcastservice/bs/g1/g1-badge9x4.svg">
Depends on: 1929151

I spun off bug 1929151 as a platform bug here.

Keywords: webcompat:needs-diagnosis → webcompat:platform-bug
Whiteboard: [webcompat-source:web-bugs] → [webcompat-source:web-bugs][webcompat:sightline]

The site seems to have changed and I think they don't trip over the same bug anymore.

This is still reproducible using archive.org snapshots like this:
https://web.archive.org/web/20240915161156/https://www3.nhk.or.jp/sports/program/

Viewing that archived snapshot in Chrome, the left column has BS/G/etc. colorful icons; those are missing if I view it in Firefox. Those are from elements like this as noted in comment 2 - comment 3:

<img src="https://web.archive.org/web/20240915161156im_/https://www.nhk.jp/assets/images/broadcastservice/bs/s1/s1-badge9x4.svg" width="100" height="50" alt="NHKBS1">

The current website looks substantially different, and the corresponding icons are now in the 3rd column and show up just-fine in Firefox -- in part because they aren't rendered using img-with-max-width anymore. Now they look like this:

<div data-v-7e3031f0="" style="background-image: url(&quot;https://www.nhk.jp/assets/images/broadcastservice/bs/s1/s1-badge9x4.svg&quot;);" class="logo gc-atom-image-rectangle logo"></div>

So I think we can call this FIXED by an upstream redesign/change in the site itself such that it no longer trips over this behavioral difference.

Status: NEW → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: