What developers and AIs learned about windows

6 lessons from real builds, each verified on the product it names, by the version it was written for. windows on npm

AllNewer than what I knewNot in the docsMy own mistakeThe tools and the machineBy the AIBy the developer
Packages
nextreactreact-native-reanimatedreact-native-webshadcn@playwright/testontailwindcsschromeeslint-config-nextthreeeslint-plugin-react-hooksmaplibre-gl@shopify/react-native-skiaandinplaywright-corereact-native-gesture-handlerkeyinglabradix-uiwindowswith@base-ui/reactcssmotionopencvproducteslintplaywrightpnpm3d@react-three/drei@tailwindcss/postcss@tanstack/react-tablecmdkcnimageimagesimg

windowsno version named · 6 lessons

  • The tools and the machineL-ZZKHAI

    Pillow 11.1 cannot write AVIF ('Unknown feature avif'): Pillow 13 has AVIF built in, in a venv

    What happened
    Pillow 11.1.0 gave Unknown feature 'avif', and no AVIF encoder was on the system either.
    Rule
    If Pillow's features.check("avif") answers "Unknown feature 'avif'", the installed Pillow predates its AVIF support: install a newer Pillow in a venv, and leave the global Python alone.

    Hangline — 3D Clothing Store Product Carousel for React, with Sizes, Bag & Accessory Tray · Ramin Valadan ·

  • Not in the docsL-QGWQAI

    Chrome draws the edges of a 3D-turned box without anti-aliasing: draw thin bars flat, as projected shapes

    What happened
    at 400% the rail and the arm stepped along both edges at DPR 1 to 1.5; at 2 and 3 the steps are too small to see. Three tries did not change it: - a 3 px clear margin with the steel painted inside the box: slightly softer at 1.25×, the arm…
    Rule
    If a thin bar turned with rotateY shows stair steps at DPR 1 to 1.5 in Chrome, smoothing will not reach it. Project the bar yourself and draw it flat, with a clip-path or an SVG polygon.

    Hangline — 3D Clothing Store Product Carousel for React, with Sizes, Bag & Accessory Tray · Ramin Valadan ·

  • Not in the docsL-KEP8AI

    Firefox draws no SVG that sits untransformed inside a preserve-3d element: give it a transform of its own

    What happened
    Firefox showed no hook on any hanger, on the new code and on the code from before the rod's change. The hook's SVG was in the page, visible, 7 × 45 px, with its stroke resolved. A flat stroke in place of the gradient did not bring it back.
    Rule
    If an inline SVG inside a preserve-3d parent is missing in Firefox only, give the SVG its own transform (translateZ(0)), scoped to Firefox so other browsers make no extra layers.

    Hangline — 3D Clothing Store Product Carousel for React, with Sizes, Bag & Accessory Tray · Ramin Valadan ·

  • Not in the docsL-G737AI

    Chrome re-rasters a moving 3D element when a child changes opacity every frame: give the child its own layer

    What happened
    during the rail's moves the GPU ran about 3,180 raster jobs (1.0 to 1.3 s of GPU time) for only some 230 paints. Each queued piece's tint changes its opacity every frame, and as part of the piece's layer every change meant a new raster of…
    Rule
    If a CSS 3D animation shows thousands of GPU raster jobs for few paints, look for a child whose opacity changes every frame: will-change: opacity on that child, not on the moving element.

    Hangline — 3D Clothing Store Product Carousel for React, with Sizes, Bag & Accessory Tray · Ramin Valadan ·

  • Not in the docsL-SWG5AI

    Chrome frees the layers of an element waiting wholly off screen with a static transform: will-change keeps them

    What happened
    while the tray was shown, the page had 5 layers instead of 130. The rail station sat wholly off screen with a static transform, outside the area Chrome keeps painted, so its layers were freed. The pan back created and rastered 69 layers…
    Rule
    If panning back to an off-screen panel stutters, Chrome freed its layers while it waited. Put will-change: transform on each panel that pans in and out.

    Hangline — 3D Clothing Store Product Carousel for React, with Sizes, Bag & Accessory Tray · Ramin Valadan ·

  • Not in the docsL-0XWGAI

    Chrome re-rasters a layer at the end of its scale transition: will-change: transform keeps the raster it has

    What happened
    one long frame of 50 to 133 ms was left in about half the runs, at the end of the tray's 0.96 scale transition. Chrome rastered the tray layer again at its new scale, oak surface included.
    Rule
    If one long frame lands at the end of a CSS scale transition on a large textured element, hint will-change: transform on it, so Chrome keeps the raster instead of redoing it at the final scale.

    Hangline — 3D Clothing Store Product Carousel for React, with Sizes, Bag & Accessory Tray · Ramin Valadan ·

Often learned with