90 lines
8.8 KiB
Markdown
90 lines
8.8 KiB
Markdown
# Investigation: Slashdot - News for Nerds
|
|
|
|
**URL**: https://www.slashdot.org
|
|
**Last investigated**: 2026-03-02
|
|
|
|
## Summary
|
|
|
|
Slashdot renders with its core content (articles, navigation, footer) mostly readable but with significant layout issues. The page uses a 960 Grid System CSS framework with float-based multi-column layout. The header bar, topic navigation, and main article feed all render correctly in the left column. However, the right sidebar is completely invisible (laid out but not painted), the ad banner region creates a large blank gap, many CSS gradients fail to parse, and the footer copyright text overflows beyond the viewport. The page is functional for reading article summaries but the layout is only ~60% correct.
|
|
|
|
## Findings
|
|
|
|
### F-001: Right sidebar (aside#slashboxes) not rendered
|
|
- **Status**: Open
|
|
- **Found**: 2026-03-02
|
|
- **Category**: Display
|
|
- **Severity**: High
|
|
- **Description**: The sidebar (`aside#slashboxes`, class `rail-right`) is correctly laid out at x=477, width=300 with a negative left margin pull (`margin: 0 0 0 -320`), but its content is completely absent from the display list. The layout tree shows sidebar children (Slashdot Deals header, newsletter image, deals sections) at the correct positions, but zero display list items are generated for x>460 below the header area. This means the entire right rail — deals, newsletter, ads, polls — is invisible.
|
|
- **Evidence**: Layout tree line 15144: `LayoutBox node=#2476 tag=aside box=block content: (477, 267.09912, 300, 2406.87)` with `margin: 0 0 0 -320`. Display list grep for x>460,y>100 returns zero items. Sidebar children like "Slashdot Deals" header (layout line 15190) never appear in the DL.
|
|
|
|
### F-002: Large blank space where ad banner should be
|
|
- **Status**: Open
|
|
- **Found**: 2026-03-02
|
|
- **Category**: Layout
|
|
- **Severity**: Medium
|
|
- **Description**: A ~120px tall blank region appears between the mobile banner (y≈137) and the first article (y≈267). This is a div (node #416) containing an ad slot `div` (node #418) that gets 80px of height from padding/margins plus a child `div.inline-block` (node #420) with width=728 but height=0 (empty ad container). The display list has an empty `PushClip`/`PopClip` pair at `rect=(13, 157, 774, 90)` confirming nothing is painted there. This is expected behavior since ad content requires JavaScript, but the 110px gap is visually jarring.
|
|
- **Evidence**: Layout line 950: `content: (13, 147.09912, 774, 110)`. DL lines 49-50: `PushClip rect=(13, 157.09912, 774, 90)` immediately followed by `PopClip`. The inline-block ad container (node #420) has width=728, height=0.
|
|
|
|
### F-003: CSS vendor-prefixed gradient parsing failures
|
|
- **Status**: Open
|
|
- **Found**: 2026-03-02
|
|
- **Category**: CSS Support
|
|
- **Severity**: Medium
|
|
- **Description**: The CSS parser fails to parse `background-image` values for `-webkit-gradient()`, `-moz-linear-gradient()`, and `-ms-linear-gradient()` functions. Over 30 parse failures are logged. While vendor-prefixed gradients are expected to be unsupported, the standard `linear-gradient()` syntax that Slashdot uses (e.g., `linear-gradient(bottom, #014444 37%, #026666 71%)`) also appears to fail. This results in missing gradient backgrounds on the header bar, buttons, and article section headers. The header bar falls back to solid `#006666` which looks acceptable, but other elements lose their visual polish.
|
|
- **Evidence**: Console warnings: `css parser: failed to parse value for 'background-image'` at multiple locations in `classic.ssl.css` and `app.css`. The standard `linear-gradient()` uses non-standard direction syntax like `linear-gradient(bottom, ...)` instead of `linear-gradient(to top, ...)`.
|
|
|
|
### F-004: Footer copyright text overflows viewport
|
|
- **Status**: Open
|
|
- **Found**: 2026-03-02
|
|
- **Category**: Layout
|
|
- **Severity**: Medium
|
|
- **Description**: The footer (`footer#ft`, class `grid_24`) has its copyright div (`div.grid_14.tright`) computing to width=541 starting at x=403, making its right edge extend to x=944. The copyright text ("Copyright © 2026 Slashdot Media. All Rights Reserved.") renders starting at x=700, extending to x=944 — well beyond the 800px viewport. This is caused by the grid system's `grid_14` class calculating width as 14/24 of a container that is wider than expected (933px footer width instead of ~774px).
|
|
- **Evidence**: Layout line 17747: `footer content: (13.774, 12546.935, 933, 39)`. Line 18058: `div content: (402.67947, 12546.935, 541.2955, 19.5)`. DL line 69: `Text rect=(782.0571, 12537.185, 38.618206, 13) text="Slashdot"` — extends beyond viewport.
|
|
|
|
### F-005: Footer logo text positioned at extreme negative x coordinate
|
|
- **Status**: Open
|
|
- **Found**: 2026-03-02
|
|
- **Category**: Layout
|
|
- **Severity**: Low
|
|
- **Description**: The Slashdot logo link in the bottom footer bar (node #3017) has an inline context line at `rect=(-999960.4, ...)` with text "Slashdot" positioned at `rect=(-999976, 12449.742, ...)`. This extreme negative coordinate suggests a text-indent or overflow hidden technique used for image replacement (common pattern: `text-indent: -9999px`), which the layout engine is faithfully computing. This is actually correct behavior for the CSS technique, but it causes an extremely wide line box.
|
|
- **Evidence**: Layout line 17279: `line[0]: rect=(23, 12446.492, -999960.4, 19.5) fragments=1` and line 17280: `frag[0]: rect=(-999976, 12449.742, 38.618206, 13) text="Slashdot"`.
|
|
|
|
### F-006: Invalid parent_font_size warnings during inline layout
|
|
- **Status**: Open
|
|
- **Found**: 2026-03-02
|
|
- **Category**: Layout
|
|
- **Severity**: Medium
|
|
- **Description**: The layout engine logs 15 warnings of "Invalid parent_font_size: 0, using default 16" during inline layout. This suggests that some elements inherit a computed font-size of 0 (possibly from `font-size: 0` used as a whitespace-collapsing technique on inline-block containers), and the engine doesn't handle this gracefully. The fallback to 16 likely produces incorrect sizing for affected elements.
|
|
- **Evidence**: Console output: `WARN layout::engine::inline: Invalid parent_font_size: 0, using default 16` — repeated 15 times. Slashdot CSS uses `font-size: 0` on `ul` elements for the icon button bar to collapse whitespace between `inline-block` children.
|
|
|
|
### F-007: Topic icon images rendered at 40x40 instead of 64x64
|
|
- **Status**: Open
|
|
- **Found**: 2026-03-02
|
|
- **Category**: Layout
|
|
- **Severity**: Low
|
|
- **Description**: The topic icons (e.g., usa_64.png) have intrinsic dimensions of 64x64 but the `<img>` tags specify `width="64" height="64"`. In the layout, they render at 40x40 within a float/span context. The CSS likely constrains them via `.topic img` styles. The images display correctly at the reduced size but are somewhat small compared to the intended layout.
|
|
- **Evidence**: Layout line 1172: `image: img#0 (intrinsic: 64x64)` but content box is `(331.6227, 279.09912, 40, 40)`. DL: `Image rect=(331.6227, 279.09912, 40, 40)`.
|
|
|
|
### F-008: Selector parse errors for malformed CSS selectors
|
|
- **Status**: Open
|
|
- **Found**: 2026-03-02
|
|
- **Category**: CSS Support
|
|
- **Severity**: Low
|
|
- **Description**: Several CSS selectors fail to parse, including `#.grid_1` (invalid ID selector followed by class), selectors that contain CSS property declarations leaked into selector text (e.g., `display:none !important; } #editor > .message.notice`), and `::-webkit-full-screen` pseudo-elements. The first two suggest the CSS has actual syntax errors that browsers tolerate via error recovery. The `::-webkit-full-screen` is vendor-specific and expected to be unsupported.
|
|
- **Evidence**: Console warnings: `selector parse: skipped unsupported characters in selector: #.grid_1`, `selector parse: skipped unsupported characters in selector: display:none !important; } #editor > .message.notice`, `selector parse: skipped unsupported characters in selector: .video-wrapper .innerWrapper:-webkit-full-screen`.
|
|
|
|
### F-009: Article headers use 80px width for topic image leaving wasted space
|
|
- **Status**: Open
|
|
- **Found**: 2026-03-02
|
|
- **Category**: Layout
|
|
- **Severity**: Low
|
|
- **Description**: Each article header (`h2.story`) has 155px of right padding to make room for the topic icon float, but the article container is only 413px wide (left column is 454px with 20px left/right padding). This means the headline text area is only ~248px wide, causing article titles to wrap aggressively (e.g., "Iowa County Rolls Out Extensive Zoning Rules For Data Centers" wraps to 3 lines). In a real browser, the topic icon floats right and the title uses more horizontal space.
|
|
- **Evidence**: Layout line 1187-1188: `h2 content: (43.414, 271.09912, 248.172, 72) padding: 4 155 4 10`. The 155px right padding reduces available text width significantly.
|
|
|
|
## Stats
|
|
|
|
| Status | High | Medium | Low | Total |
|
|
|--------|------|--------|-----|-------|
|
|
| Open | 1 | 3 | 4 | 8 |
|
|
| Fixed | 0 | 0 | 0 | 0 |
|