1caff05f2d
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>
137 lines
11 KiB
Markdown
137 lines
11 KiB
Markdown
# 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 |
|