From d42ddc261234d3813bb940ad23d9a696f4508d4c Mon Sep 17 00:00:00 2001 From: pythonlearner1025 Date: Wed, 16 Sep 2026 13:56:07 -0700 Subject: [PATCH] fix(editor): Blueprint icons paint under page zoom in Chrome 153 Chrome 153 painted nothing inside a Blueprint icon below 80% page zoom. The icon stayed in the dom, laid out and clickable. Its pixels never appeared. The owner runs the editor at 75%. There the navbar icons, both viewport toolbars, the panel flaps, the tab kind icon and the hierarchy icons were gone. Page zoom is a css zoom on the root element. The user agent stylesheet clips an inline svg with overflow: hidden. Under that zoom Chrome computes the clip as empty for these small icons. One rule lifts the clip. Blueprint draws inside the viewBox, so the rule changes nothing at 100%. I measured all 1360 icon paths the package ships. The largest excursion past the viewBox is 0.08 of a 16 unit box. That is a fraction of one device pixel. Verified headless in Google Chrome 153.0.8010.48 against the terminator project. I built this branch and origin/main, and measured both: - Icons painted at zoom 0.75: 38 of 69 before, 69 of 69 after. - Icons painted at zoom 0.9: 64 of 66 before, 66 of 66 after. - Navbar folder-close, a toolbar icon and a hierarchy icon at zoom 0.75: 0, 0 and 0 lit pixels before; 315, 237 and 180 after. - At zoom 1 all 63 icons keep the same pixel count in both builds. The navbar strip of the two screenshots is byte for byte identical. - Chrome zoom steps 25%, 33%, 50%, 67% and 75% lose the icons without the rule. They keep them with it, at device pixel ratio 1 and 2. npm run typecheck, npm run lint, npm test -w packages/kite3d (6 tests) and npm run test:scripts (2 tests) all pass. Co-Authored-By: Claude Fable 5.1 --- packages/editor/src/renderer.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/editor/src/renderer.scss b/packages/editor/src/renderer.scss index 550eacc7..47d3a026 100644 --- a/packages/editor/src/renderer.scss +++ b/packages/editor/src/renderer.scss @@ -22,6 +22,15 @@ body{ display: none; } +// Chrome 153 paints nothing inside a Blueprint icon at some page zooms, 75% and 90% included. +// The icon stays in the dom, laid out and clickable, and its pixels never appear. +// Page zoom is a css zoom on the root element, and under that zoom Chrome computes the +// overflow: hidden clip the user agent stylesheet puts on an inline svg as empty for these +// small icons. Blueprint draws inside the viewBox, so lifting the clip changes nothing at 100%. +.bp5-icon > svg { + overflow: visible; +} + .bp5-vars, :root { // define custom properties for light and dark themes --main-app-background-hsl: var(--light-gray4-hsl);