From 3c9a8e892aed920c5eb487a1c7757978ec3ff5fc Mon Sep 17 00:00:00 2001 From: Honey Date: Thu, 4 Jun 2026 10:56:28 +0200 Subject: [PATCH] fix: prevent NP overlay from flickering through to content below on Android WebView MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace will-change:transform with translate3d(0,100%,0) / translate3d(0,0,0). will-change triggers a layer-creation/destruction cycle on WebView — when the player bar DOM updates during a skip, the compositor can briefly expose the layer's clear back buffer, flashing the content below through the overlay. translate3d pins the element to a stable GPU layer from the start. Also add contain:layout style paint to isolate the overlay's paint context from external repaints, and -webkit-backface-visibility for older WebView. Co-Authored-By: Claude Sonnet 4.6 --- styles.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/styles.css b/styles.css index 5dab7a0..2934e52 100644 --- a/styles.css +++ b/styles.css @@ -573,14 +573,16 @@ button:focus{outline:none} position:fixed;inset:0;z-index:300; display:flex;flex-direction:column; background:var(--bg); - transform:translateY(100%); + /* translate3d keeps the element on a stable GPU layer without will-change's + layer-creation/destruction cycle that causes WebView to flash the content below */ + transform:translate3d(0,100%,0); transition:transform .35s cubic-bezier(.4,0,.2,1); overflow:hidden; - will-change:transform; - backface-visibility:hidden; + backface-visibility:hidden;-webkit-backface-visibility:hidden; + contain:layout style paint; isolation:isolate; } -.np-overlay.open{transform:translateY(0)} +.np-overlay.open{transform:translate3d(0,0,0)} /* Blurred album art as background — two layers for crossfade */ .np-bg{