liquid-gl 2.2.1 → 2.2.3

package/README.md

@@ -2,7 +2,7 @@
 
 <a href="https://liquidgl.naughtyduk.com"><img src="https://raw.githubusercontent.com/naughtyduk/liquidGL/main/assets/liquidGL-npm-preview.gif" alt="liquidGL" width="100%" height="auto"/></a>
 
-### v2.2.1
+### v2.2.3
 
 > [!NOTE]
 > `liquidGL` is free to use for both non-commercial and commercial purposes.
@@ -234,10 +234,10 @@ Passing `gsap` lets `liquidGL` drive its render loop from the GSAP ticker and ke
 
 | Option       | Type     | Default       | Description                                                                                                                                                           |
 | ------------ | -------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `target`     | string   | `'.liquidGL'` | **Required.** CSS selector for the element(s) to glassify.                                                                                                            |
+| `engine`     | string   | `'auto'`      | Render backend chain: `'auto'` (WebGPU → WebGL2 → WebGL1 → CSS), `'webgpu'` (WebGPU → CSS), `'webgl2'` (WebGL2 → WebGL1 → CSS) or `'webgl'` (WebGL1 → CSS).           |
 | `snapshot`   | string   | `'body'`      | CSS selector for the element to snapshot.                                                                                                                             |
+| `target`     | string   | `'.liquidGL'` | **Required.** CSS selector for the element(s) to glassify.                                                                                                            |
 | `resolution` | number   | `2.0`         | Resolution of the background snapshot (clamped 0.1–3.0). Higher is sharper but uses more memory.                                                                      |
-| `engine`     | string   | `'auto'`      | Render backend chain: `'auto'` (WebGPU → WebGL2 → WebGL1 → CSS), `'webgpu'` (WebGPU → CSS), `'webgl2'` (WebGL2 → WebGL1 → CSS) or `'webgl'` (WebGL1 → CSS).           |
 | `refraction` | number   | `0.01`        | Base refraction offset applied across the pane (0–1).                                                                                                                 |
 | `aberration` | number   | `0`           | Chromatic aberration strength (0–1). Scales with the refraction offset, so dispersion is strongest at the bevel. `0` disables it and skips the extra texture samples. |
 | `bevelDepth` | number   | `0.08`        | Additional refraction on the edge to simulate depth (0–1).                                                                                                            |

package/liquidGL-helper.js

@@ -4,7 +4,7 @@
  *
  * Author: NaughtyDuk© – https://liquidgl.naughtyduk.com
  * Licence: MIT
- * Version: v2.2.1
+ * Version: v2.2.3
  */
 
 (() => {

package/liquidGL.js

@@ -4,7 +4,7 @@
  *
  * Author: NaughtyDuk© – https://liquidgl.naughtyduk.com
  * Licence: MIT
- * Version: v2.2.1
+ * Version: v2.2.3
  */
 
 const liquidGL = (() => {
@@ -2958,6 +2958,7 @@ fn fs() -> @location(0) vec4<f32> {
       if (!this.snapshotTarget) this.snapshotTarget = document.body;
 
       this._isScrolling = false;
+      this._pendingViewportResize = false;
       let lastScrollY = window.scrollY;
       let scrollTimeout;
       const scrollCheck = () => {
@@ -2967,6 +2968,10 @@ fn fs() -> @location(0) vec4<f32> {
           clearTimeout(scrollTimeout);
           scrollTimeout = setTimeout(() => {
             this._isScrolling = false;
+            if (this._pendingViewportResize) {
+              this._pendingViewportResize = false;
+              onResize();
+            }
           }, 200);
         }
         requestAnimationFrame(scrollCheck);
@@ -2974,7 +2979,12 @@ fn fs() -> @location(0) vec4<f32> {
       requestAnimationFrame(scrollCheck);
 
       const onResize = debounce(() => {
-        if (this._capturing || this._isScrolling) return;
+        if (this._capturing) return;
+        if (this._isScrolling) {
+          this._pendingViewportResize = true;
+          return;
+        }
+        this._pendingViewportResize = false;
 
         if (window.visualViewport && window.visualViewport.scale !== 1) {
           return;
@@ -3333,6 +3343,13 @@ fn fs() -> @location(0) vec4<f32> {
       const backend = this.backend;
       if (!backend || !this.hasTexture) return;
 
+      const dprNow = Math.min(2, window.devicePixelRatio || 1);
+      const bufW = Math.trunc(innerWidth * dprNow);
+      const bufH = Math.trunc(innerHeight * dprNow);
+      if (this.canvas.width !== bufW || this.canvas.height !== bufH) {
+        this._resizeCanvas();
+      }
+
       this.lenses.forEach((ln) => {
         if (ln._isSticky && !ln._mirrorActive) ln.updateMetrics();
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "liquid-gl",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "Liquid Glass - Powered by WebGPU/WebGL.",
   "type": "module",
   "main": "./liquidGL.js",