moldybits/rust_browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
rust_browser/investigations/cnn/report.md
Zachary D. Rowitsch 1caff05f2d Update CNN investigation report for 1920x1080 viewport 
Re-ran the CNN homepage rendering investigation with the new default
1920x1080 viewport. F-001 (flex overflow) no longer manifests at this
width, F-007 (nav links) upgraded to Open/High since the >=960px media
query should now match, and F-011 (duplicate badges) regressed. Added
two new findings: F-013 (narrow sidebar grid columns) and F-014
(unsupported :-webkit-full-screen selector).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-17 11:06:08 -04:00

11 KiB
Raw Permalink Blame History

Investigation: CNN Homepage

URL: https://www.cnn.com Viewport: 1920x1080 Last investigated: 2026-03-17

Summary

CNN's homepage is a complex, modern site using CSS Grid, Flexbox, custom properties, content: url() for icons, and responsive media queries. At the new 1920x1080 desktop viewport, the page renders significantly better than at the previous 800px width: the main content uses a proper multi-column grid layout, the flex overflow issue (F-001) no longer manifests, and much more content is visible in the viewport. 110 images are rendered. Total page height is ~19043px with 3217 display list items.

Key remaining issues: (1) the header/logo area is still blank due to a JS-dependent CSS selector, (2) the top navigation links render as a vertical hamburger menu instead of a horizontal desktop nav bar even though the >=960px media query should now match, (3) badges are painted twice in the display list (regression), and (4) some right-sidebar grid columns are only 132px wide, squeezing thumbnails.

Findings

F-001: Flex items overflow container instead of shrinking

  • Status: Not Observed (2026-03-17)
  • Found: 2026-03-17
  • Category: Layout
  • Severity: High
  • Description: Previously at 800px viewport, a flex container (node #2575) had two children each taking 768px width, causing the second column to overflow at x=784. At the 1920x1080 viewport, the grid gives each column ~317px, so the flex children fit within their container. No elements extend beyond the 1920px viewport edge. The underlying flex-shrink/min-width:auto issue may still be latent — it just isn't triggered because the wider viewport provides enough space.
  • Evidence: Layout tree shows flex container #2575 at content: (272, 421.2, 317.33, 277.5). Child #2577 at content: (272, 421.2, 317.33, 167). No elements at x=784 or beyond viewport. Zero matches for x-positions at 784, 1552, 2320, or 3088.
  • Suggested fix: Still worth investigating flex-shrink handling for items with min-width:auto — the issue would reappear at narrower viewports.

F-002: Header/logo area is completely blank

  • Status: Open
  • Found: 2026-03-17
  • Category: CSS Support
  • Severity: High
  • Description: The header occupies (0,0,1920,316) in the layout but nothing visible is painted in this region. The CNN logo is injected via content: url(/media/sites/cnn/cnn.svg) on a :before pseudo-element with the selector body.underscored .header .search-bar:before. The .underscored class is added by JavaScript at runtime — without JS execution, the selector does not match and the logo is not generated.
  • Evidence: Layout tree shows header node #205 at (0,0,1920,316). Display list has no visible items (text/image/background) in the 0-276 y-range. The CSS selector requires JS to add the .underscored class to <body>.

F-003: CSS content: url() not supported

  • Status: Fixed (2026-03-17)
  • Found: 2026-03-17
  • Category: CSS Support
  • Severity: High
  • Description: The CSS parser could not parse content: url(...) values. This has been fixed — content: url() is now parsed, fetched, decoded, and rendered as replaced elements on pseudo-elements.
  • Evidence: Previously: 82 warnings. Now: 0 content:url() parse failures.

F-004: CSS content: unset / content: initial not supported

  • Status: Open
  • Found: 2026-03-17
  • Category: CSS Support
  • Severity: Low
  • Description: The CSS parser cannot parse content: unset or content: initial, used by CNN to remove or reset generated content in certain contexts. 10 warnings remain (9 for content:unset, 1 for content:initial).
  • Evidence: Warnings like failed to parse value for 'content' near '...content:unset...' and ...content:initial...

F-005: Trending bar items overlap horizontally

  • Status: Open
  • Found: 2026-03-17
  • Category: Layout
  • Severity: Medium
  • Description: The trending bar renders "Live Updates" and "Trending:" labels with story links. Items have pipe separators (|) but the separators render on a second line (y=371.6) while all content renders on the first line (y=351). The flex items in the <ul> are not properly spaced — items overlap or run together. At 1920px, the items spread across ~680px but separators don't appear inline with the text.
  • Evidence: Display list shows trending text at y=351 with separators at y=371.6 (20.6px below). Items like "Marine ground troops", "Oil prices jump", "USA vs. Venezuela", "Guinness beer", "Gavin Newsom dyslexia" all render at y=351 but separators between them drop to y=371.6 instead of being inline.

F-006: SVG elements render with zero dimensions

  • Status: Open
  • Found: 2026-03-17
  • Category: Layout
  • Severity: Medium
  • Description: SVG elements in the header (hamburger menu icon, search icon) have zero width and/or height in the layout tree. The hamburger button SVG has proper width (24px) but path elements have zero height. The search/CNN logo SVGs render at (0x0).
  • Evidence: Layout tree: SVG path #450 at (32, 276, 24, 0) — zero height. SVG #467 at (32, 308, 0, 0) — zero width and height.

F-007: Navigation links render as vertical hamburger menu at desktop width

  • Status: Open
  • Found: 2026-03-17
  • Category: Layout
  • Severity: High
  • Description: At the 1920px viewport, the @media screen and (width>=960px) should match, applying display: contents to .header__nav and showing the navigation links (US, World, Politics, Business, etc.) as a horizontal desktop nav bar. Instead, the nav links render as a vertical stack (each on its own line at y=348, 388, 428, 468, 508...) resembling an expanded hamburger menu. Each link takes ~981-993px width. The flex container #443 at (32, 276, 1376, 40) is only 40px tall but children extend well below it to y=508+. This may indicate that display: contents is not properly implemented or that descendant layout isn't correctly inheriting the parent flex context.
  • Evidence: Nav link positions: US at (56, 348), World at (44, 388), Politics at (44, 428), Business at (44, 468) — each 40px apart vertically instead of being side-by-side horizontally. Parent flex container #443 height is only 40px but children extend 232px below it.
  • Suggested fix: Investigate display: contents interaction with flex layout. When an element has display: contents, its children should participate directly in the grandparent's flex layout, not stack as blocks.

F-008: box-shadow with system color keyword not parsed

  • Status: Open
  • Found: 2026-03-17
  • Category: CSS Support
  • Severity: Low
  • Description: CSS box-shadow: 0 0 0 2px buttontext uses the CSS system color keyword buttontext, which the parser fails to parse.
  • Evidence: Warning: failed to parse value for 'box-shadow' near 'box-shadow:0 0 0 2px buttontext'

F-009: Font loading failure for Noto Sans Arabic

  • Status: Fixed (2026-03-17)
  • Found: 2026-03-17
  • Category: Other
  • Severity: Low
  • Description: Font file:///fonts/cnn/noto_sans_arabic-v1.ttf failed to load due to incorrect inline stylesheet URL resolution. Fixed by passing the page base URL for inline <style> blocks.
  • Evidence: Font now loads successfully from https://www.cnn.com/fonts/cnn/noto_sans_arabic-v1.ttf.

F-010: Iframe fails to load (healthguides.cnn.com)

  • Status: Open
  • Found: 2026-03-17
  • Category: Other
  • Severity: Low
  • Description: An embedded iframe pointing to healthguides.cnn.com fails with a connection refused error. This appears to be a CNN server-side issue (the endpoint may be deprecated).
  • Evidence: Warning: failed to load iframe src 'https://healthguides.cnn.com/ucms/rss/cnn-hp-health-link-1?renderer=html': network error: connection failed.

F-011: Duplicate display list entries (badges painted twice)

  • Status: Open (regression)
  • Found: 2026-03-17
  • Category: Display
  • Severity: Medium
  • Description: Badge elements are painted twice in the display list at identical positions. "LIVE UPDATES" badge (gradient + text) appears at lines 58-65, with the gradient and text each rendered twice. "BREAKING NEWS" badge appears at lines 150-155, also doubled. "FIRST" text at y=11308.651 also duplicated. This was previously marked Fixed but has regressed.
  • Evidence: Display list lines 60-61 and 64-65: Text rect=(290.29, 428.9, ...) text="LIVE" appears twice. Lines 151-152 and 154-155: Text rect=(647.62, 884.2, ...) text="BREAKING" appears twice. Lines 2416 and 2420: Text rect=(1462.74, 11308.65, ...) text="FIRST" appears twice.
  • Suggested fix: Investigate why badge pseudo-elements (likely ::before/::after) generate duplicate display list entries. The gradient background is also doubled, suggesting both the container and pseudo-element are painting the same content.

F-012: CSS repeat() not parsed in grid templates

  • Status: Fixed (2026-03-17)
  • Found: 2026-03-17
  • Category: CSS Support
  • Severity: High
  • Description: The CSS parser could not parse repeat() in grid templates. Fixed — repeat(N, track-list) is now expanded at parse time. Only repeat(auto-fit, ...) remains unsupported (1 warning).
  • Evidence: repeat(4, 1fr) correctly expands to [Fr(1), Fr(1), Fr(1), Fr(1)]. Only 1 remaining warning for repeat(auto-fit, minmax(25%,1fr)).

F-013: Right sidebar grid columns too narrow (132px)

  • Status: Open
  • Found: 2026-03-17
  • Category: Layout
  • Severity: Medium
  • Description: Some right-sidebar grid containers (e.g., node #4199 at x=1555, node #4939 at x=1555) are only 132px wide. Thumbnail images inside are squeezed to 132x74px or 130x73px. This appears to be a grid column sizing issue where the rightmost column in a multi-column grid receives too little space. The grid at node #3130 (1290.66, 421.2, 661.33, 1303) should distribute its 661px across multiple columns, but some cells get only 132px while others get 317px.
  • Evidence: Grid #4199 at content: (1555.33, 1739.71, 132, 675.3). Grid #4939 at content: (1555.33, 3856.59, 132, 555.3). Images inside are 132x74px. Compare with grid #3642 at content: (1330.67, 1374.73, 317.33, 221) which gets 317px.

F-014: Unsupported CSS selector pseudo-class (:-webkit-full-screen)

  • Status: Open
  • Found: 2026-03-17
  • Category: CSS Support
  • Severity: Low
  • Description: The selector parser skips .mapboxgl-map:-webkit-full-screen as unsupported. This is a vendor-prefixed pseudo-class used for a map widget; impact is minimal.
  • Evidence: Warning: selector parse: skipped unsupported characters in selector: .mapboxgl-map:-webkit-full-screen

Stats

Status High Medium Low Total
Open 2 3 4 9
Fixed 2 0 1 3
Not Observed 1 0 0 1
Reference in New Issue View Git Blame Copy Permalink