rdev/liquid-glass-react
1
0
Fork 0
Code Issues 17 Pull requests 2 Projects Releases Packages Wiki Activity Actions

LiquidGlass forces center anchoring via translate(-50%, -50%) making placement difficult; cannot disable via props #20

New issue
Open
opened 2025-09-04 01:20:48 -04:00 by Ephasme · 1 comment
Ephasme commented 2025-09-04 01:20:48 -04:00 (Migrated from github.com)
Copy link

Summary

LiquidGlass always applies

transform: translate(calc(-50% + x), calc(-50% + y)) …

and defaults to

top: 50%;
left: 50%;

when not provided.
This effectively anchors the component’s center to the given point and makes it hard to position the element in normal document flow or by top-left coordinates.

Passing globalMousePos={{x:0,y:0}} and mouseOffset={{x:0,y:0}} removes motion, but placement remains “off” due to the enforced center anchoring.

Environment

  • liquid-glass-react: 1.1.1
  • React: 19.1.1
  • Vite: 7.1.2
  • Browser: Chrome (latest) [also reproducible elsewhere]

Reproduction

Render LiquidGlass without explicit style.top/left and set mouse props to zeros:

<LiquidGlass
  cornerRadius={20}
  elasticity={0}
  globalMousePos={{ x: 0, y: 0 }}
  mouseOffset={{ x: 0, y: 0 }}
>
  <h1>Example</h1>
</LiquidGlass>

The element appears “badly placed” (unexpectedly centered/offset) within the layout.

Even with explicit zero motion, computed styles show:

transform: translate(calc(-50% + 0px), calc(-50% + 0px)) scale(1);
top: 50%;
left: 50%;

Expected Behavior

Ability to opt out of the built-in centering so the component can:

  • Participate in normal flow, or
  • Be positioned by its top-left corner (via parent CSS) without the -50% translation.

Actual Behavior

Component enforces center anchoring:

  • Defaults to position: relative, top: 50%, left: 50% when not set.
  • Always includes translate(calc(-50% + x), calc(-50% + y)) in its inline transform.

As a result, the component is difficult to place precisely unless you adopt the center-anchoring model (e.g., position: fixed; top: 50%; left: 50%).

Code References

  • Build of transform with translate(-50%, -50%) + elastic offsets:
    node_modules/liquid-glass-react/dist/index.js:431

  • Defaulting of position and top/left to 50%:
    node_modules/liquid-glass-react/dist/index.js:434-441

Workarounds

  • Use style={{ position: "fixed", top: "50%", left: "50%" }} to anchor center to viewport.
  • Or wrap LiquidGlass in a parent position: relative container and give LiquidGlass position: absolute; top: 50%; left: 50% to center within that container.
  • To eliminate motion only, set elasticity={0} (but centering remains).

Proposed API Improvements

Add a prop to disable internal centering and position management, for example:

  • managePosition?: boolean (default true)

    • If false, do not set default position/top/left, and omit the translate(-50%, -50%) part (apply only elastic translation from globalMousePos/mouseOffset).

Alternatively:

  • center?: boolean (default true) — control the -50% centering behavior explicitly.
  • anchorOrigin?: "center" | "top-left" | { x: string; y: string } — more precise control.

Also:

  • Document clearly that without these props, the component centers itself and expects an anchor at top/left.

This change would preserve the current default behavior while letting consumers integrate LiquidGlass into varied layouts without fighting the enforced center anchoring.

# Summary `LiquidGlass` always applies ```css transform: translate(calc(-50% + x), calc(-50% + y)) … ``` and defaults to ```css top: 50%; left: 50%; ``` when not provided. This effectively anchors the component’s center to the given point and makes it hard to position the element in normal document flow or by top-left coordinates. Passing `globalMousePos={{x:0,y:0}}` and `mouseOffset={{x:0,y:0}}` removes motion, but placement remains “off” due to the enforced center anchoring. --- # Environment * **liquid-glass-react**: 1.1.1 * **React**: 19.1.1 * **Vite**: 7.1.2 * **Browser**: Chrome (latest) \[also reproducible elsewhere] --- # Reproduction Render `LiquidGlass` without explicit `style.top`/`left` and set mouse props to zeros: ```tsx <LiquidGlass cornerRadius={20} elasticity={0} globalMousePos={{ x: 0, y: 0 }} mouseOffset={{ x: 0, y: 0 }} > <h1>Example</h1> </LiquidGlass> ``` The element appears *“badly placed”* (unexpectedly centered/offset) within the layout. Even with explicit zero motion, computed styles show: ```css transform: translate(calc(-50% + 0px), calc(-50% + 0px)) scale(1); top: 50%; left: 50%; ``` --- # Expected Behavior Ability to opt out of the built-in centering so the component can: * Participate in normal flow, **or** * Be positioned by its top-left corner (via parent CSS) without the `-50%` translation. --- # Actual Behavior Component enforces center anchoring: * Defaults to `position: relative`, `top: 50%`, `left: 50%` when not set. * Always includes `translate(calc(-50% + x), calc(-50% + y))` in its inline transform. As a result, the component is difficult to place precisely unless you adopt the center-anchoring model (e.g., `position: fixed; top: 50%; left: 50%`). --- # Code References * Build of transform with `translate(-50%, -50%) + elastic offsets`: `node_modules/liquid-glass-react/dist/index.js:431` * Defaulting of position and top/left to 50%: `node_modules/liquid-glass-react/dist/index.js:434-441` --- # Workarounds * Use `style={{ position: "fixed", top: "50%", left: "50%" }}` to anchor center to viewport. * Or wrap `LiquidGlass` in a parent `position: relative` container and give `LiquidGlass` `position: absolute; top: 50%; left: 50%` to center within that container. * To eliminate motion only, set `elasticity={0}` (but centering remains). --- # Proposed API Improvements Add a prop to disable internal centering and position management, for example: * `managePosition?: boolean` (default `true`) * If `false`, do not set default `position`/`top`/`left`, and omit the `translate(-50%, -50%)` part (apply only elastic translation from `globalMousePos`/`mouseOffset`). Alternatively: * `center?: boolean` (default `true`) — control the `-50%` centering behavior explicitly. * `anchorOrigin?: "center" | "top-left" | { x: string; y: string }` — more precise control. Also: * Document clearly that without these props, the component centers itself and expects an anchor at top/left. --- This change would preserve the current default behavior while letting consumers integrate `LiquidGlass` into varied layouts without fighting the enforced center anchoring.
👍 4
cpojer commented 2025-11-05 08:53:39 -05:00 (Migrated from github.com)
Copy link

Try @nkzw/liquid-glass instead.

Try [`@nkzw/liquid-glass`](https://github.com/nkzw-tech/liquid-glass) instead.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
master
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
rdev/liquid-glass-react#20
No description provided.