Investigation: YouTube Homepage

URL: https://www.youtube.com Last investigated: 2026-03-02

Summary

YouTube serves a "skeleton" loading page that consists of a masthead (header bar) and a grid of placeholder video cards. No actual content is loaded without JavaScript execution. The engine renders the masthead header area and the video card skeleton placeholders, but several significant issues prevent a faithful rendering:

The largest external stylesheet (kevlar_base, 3.3MB) is rejected due to the CSS input size limit (2MB), losing many rules.
The skeleton video cards are laid out in a single horizontal row extending far beyond the viewport (~7600px wide) instead of wrapping into a grid, due to a flex-wrap bug where auto-width containers are incorrectly treated as having indefinite main size.
The masthead is rendered in normal flow instead of being fixed-positioned at the top, meaning it scrolls with content.
CSS custom properties (variables) are not resolved, causing fallback failures.
The unset CSS keyword is not recognized for most properties.

The screenshot shows: a thin white header area at the top, a narrow border/chip row, and two visible gray placeholder thumbnails — the rest of the 24 cards overflow horizontally out of view.

Findings

F-001: CSS input size limit rejects YouTube's main stylesheet

Status: Open
Found: 2026-03-02
Category: CSS Support
Severity: High
Description: The kevlar_base stylesheet (3,349,384 bytes) exceeds the CSS parser's 2,097,152 byte limit and is entirely skipped. This stylesheet contains the majority of YouTube's component styles, meaning nearly all styled elements beyond the inline skeleton CSS lose their styling. The warning in the log reads: css parser: input size 3349384 exceeds limit 2097152.
Evidence: Render log: WARN css::parser: css parser: input size 3349384 exceeds limit 2097152 (https://www.youtube.com/s/_/ytmainappweb/_/ss/k=ytmainappweb.kevlar_base...)
Suggested fix: Increase the CSS input size limit (currently 2MB) to at least 4MB, or make it configurable. Large sites routinely ship multi-MB stylesheets.

F-002: Flex-wrap fails when container has auto width (cards don't wrap)

Status: Open
Found: 2026-03-02
Category: Layout
Severity: High
Description: The #home-container-media flex container has display:flex; flex-direction:row; flex-wrap:wrap but its 24 skeleton cards are laid out in a single horizontal row extending to x=7594+, overflowing the 800px viewport. The root cause is in flex/distribution.rs:25: if flex_wrap == FlexWrap::Nowrap || !main_size_definite — when specified_width is auto, the code treats the main size as indefinite and forces single-line layout. Per CSS spec, a block-level flex container in normal flow resolves its width from the containing block, making it definite. The main_size_definite check at flex/layout.rs:118-119 should consider the resolved/used width, not just whether an explicit width was specified.
Evidence: Layout dump shows #home-container-media (node #172) at content: (88, 144, 696, 20) with height=20 (should be ~1000+ with wrapped rows). All 24 .rich-grid-media-skeleton children positioned at y=144 with x values 96, 422, 748, 1074, 1400, ... 7594 (single line, no wrapping).
Suggested fix: In partition_flex_lines, treat the main size as definite when the container is a block-level flex container whose width was resolved from normal flow (i.e., from its containing block), even if specified_width is auto.

F-003: `position:fixed` masthead not removed from normal flow

Status: Open
Found: 2026-03-02
Category: Layout
Severity: Medium
Description: The ytd-masthead.shell has CSS position:fixed; top:0; right:0; left:0; height:56px but is laid out as a flex child of ytd-app at (0, 0, 800, 56) in normal flow, pushing subsequent content down. Fixed-positioned elements should be removed from flow and positioned relative to the viewport. In the layout dump, ytd-app gets height=0, and the masthead consumes 56px of body height in flow.
Evidence: Layout dump: ytd-masthead (node #100) at content: (0, 0, 800, 56) box=flex appears as in-flow child of ytd-app. The position:fixed rule comes from the masthead_shell inline <style> block, which was successfully fetched and parsed.

F-004: CSS custom properties (variables) not resolved

Status: Open
Found: 2026-03-02
Category: CSS Support
Severity: Medium
Description: The page uses color: var(--yt-spec-text-primary) in the masthead custom styles, but the variable is never defined (it would normally be set by JavaScript or a component stylesheet). The engine warns about undefined variables but the larger issue is that CSS custom property definitions and var() resolution across stylesheets may not be fully working. YouTube's component system relies heavily on custom properties for theming.
Evidence: Render log: WARN style::var_substitution: Undefined CSS variable '--yt-spec-text-primary' with no fallback provided

F-005: CSS `unset` keyword not supported for most properties

Status: Open
Found: 2026-03-02
Category: CSS Support
Severity: Medium
Description: The CSS unset keyword is a CSS-wide value that should be recognized for any property, but the parser only handles it in a couple of shorthand-specific paths (typography and background). When the home-page skeleton CSS includes flex-grow:unset inside a @media (min-width:1600px) block, the parser fails with a warning. While this media query doesn't match the 800px viewport, the parse failure could affect surrounding declarations depending on error recovery.
Evidence: Render log: WARN css::parser: css parser: failed to parse value for 'flex-grow' ... near 'unset;-webkit-flex-grow:unset;flex-grow:unset'
Suggested fix: Add unset (along with initial, inherit, revert) as globally recognized CSS-wide keywords in the property value parser.

F-006: No visible text or YouTube logo in screenshot

Status: Open
Found: 2026-03-02
Category: Display
Severity: Medium
Description: The screenshot shows only gray rectangles and white areas — no YouTube logo SVG, no text content. The YouTube logo is an inline SVG with <a style="display: none;"> wrapping it, so it's correctly hidden. But other text elements (copyright notice, etc.) and the SVG menu icon (hamburger) should be visible. The SVG menu icon is rendered as a block with zero height in the layout dump (node #106 path has height=0), suggesting SVG path rendering is not producing visible output.
Evidence: Display list has 35 items, all SolidRect shapes — no Text or Image draw commands. The menu icon SVG (node #104-106) shows path element with content: (24, 36.95125, 24, 0) (height=0).

F-007: `overflow:hidden` clipping truncates skeleton content

Status: Open
Found: 2026-03-02
Category: Layout
Severity: Low
Description: The #home-container-skeleton has overflow:hidden which correctly clips overflowing content. However, because of F-002 (flex-wrap failure), the combination means only ~2 of the 24 skeleton cards are visible. This is not an engine bug per se — once F-002 is fixed, the cards will wrap and overflow:hidden will work as intended.
Evidence: Display list: PushClip rect=(72, 56, 728, 108) clips the container area. Only the first 2 skeleton card backgrounds (at x=96 and x=422) are within the visible 800px viewport.

Stats

Status	High	Medium	Low	Total
Open	2	3	1	6
Fixed	0	0	0	0

7.7 KiB Raw Permalink Blame History