polite-media 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 Notable changes, newest first. Versions follow [semver](https://semver.org); while
 this is `0.x`, a minor bump may still break things and will say so here.
 
+## 0.6.1 (2026-10-11)
+
+### Fixed
+
+- **The reveal failsafe could not run on the compositor.** Its animation lasted `0s`, which
+  Chromium will not composite, so every image marked for a reveal carried a main-thread animation
+  and Lighthouse listed it under "Avoid non-composited animations". It now lasts `1ms`, and a
+  stray image still arrives unfaded once `--polite-failsafe` has passed.
+
+### Documentation
+
+- **The wrapper recipe in "Composing your own animation" uses a `1ms` failsafe**, for the same
+  reason. Its `0s` gave a copied rule the same Lighthouse warning.
+
 ## 0.6.0 (2026-10-07)
 
 ### Breaking

package/README.md

@@ -200,7 +200,7 @@ you have to add yourself:
 .card.is-visible:has(img[data-polite-reveal]:not([data-polite-ready])) {
   opacity: 0;
   /* yours, not the library's: see below */
-  animation: your-failsafe 0s linear 5s forwards;
+  animation: your-failsafe 1ms linear 5s forwards;
 }
 ```
 
@@ -208,7 +208,9 @@ you have to add yourself:
 `image.css` is CSS-only and reveals **the image**, not a wrapper around it. So a
 bundle that never arrives leaves your wrapper hidden for good even though the
 library's own failsafe fired. Give any rule of yours that hides on
-`:not([data-polite-ready])` its own failsafe on the same delay.
+`:not([data-polite-ready])` its own failsafe on the same delay, and give it a
+length: Chromium runs no animation of `0s` on the compositor, and Lighthouse
+lists every such element as non-composited.
 
 **Gate a wrapper only on images that will load.** The `:has()` above waits on
 every marked image inside the card, and lazy loading may never fetch some of

package/dist/image.css

@@ -1 +1 @@
-@media(scripting:enabled){img[data-polite-reveal][loading=lazy],img[data-polite-reveal=eager]{opacity:0;transition:opacity var(--polite-fade, .35s) ease}img[data-polite-reveal][loading=lazy]:not([data-polite-ready]):not([data-polite-managed]),img[data-polite-reveal=eager]:not([data-polite-ready]):not([data-polite-managed]){animation:polite-reveal-failsafe 0s var(--polite-failsafe, 5s) forwards}img[data-polite-reveal][data-polite-ready]{opacity:1}@keyframes polite-reveal-failsafe{to{opacity:1}}}@media(prefers-reduced-motion:reduce){img[data-polite-reveal][loading=lazy],img[data-polite-reveal=eager]{transition:none}}
+@media(scripting:enabled){img[data-polite-reveal][loading=lazy],img[data-polite-reveal=eager]{opacity:0;transition:opacity var(--polite-fade, .35s) ease}img[data-polite-reveal][loading=lazy]:not([data-polite-ready]):not([data-polite-managed]),img[data-polite-reveal=eager]:not([data-polite-ready]):not([data-polite-managed]){animation:polite-reveal-failsafe 1ms var(--polite-failsafe, 5s) forwards}img[data-polite-reveal][data-polite-ready]{opacity:1}@keyframes polite-reveal-failsafe{to{opacity:1}}}@media(prefers-reduced-motion:reduce){img[data-polite-reveal][loading=lazy],img[data-polite-reveal=eager]{transition:none}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polite-media",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Background video, image reveals and next-page image warming. Reveals on the frame that actually painted, plays only what is on screen, respects data and motion.",
   "keywords": [
     "video",

package/src/image.css

@@ -57,10 +57,13 @@
    * stylesheet applied stayed at 0 for the whole delay and then snapped to 1
    * unfaded, while Chromium and WebKit revealed it. Cancelling only the animation
    * on such an image put it at 1 immediately.
+   *
+   * 1ms rather than 0s: Chromium runs no animation of zero length on the
+   * compositor, and Lighthouse lists every such image as non-composited.
    */
   img[data-polite-reveal][loading='lazy']:not([data-polite-ready]):not([data-polite-managed]),
   img[data-polite-reveal='eager']:not([data-polite-ready]):not([data-polite-managed]) {
-    animation: polite-reveal-failsafe 0s var(--polite-failsafe, 5s) forwards;
+    animation: polite-reveal-failsafe 1ms var(--polite-failsafe, 5s) forwards;
   }
 
   img[data-polite-reveal][data-polite-ready] {