Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

scale causes position issue (controlled)

See original GitHub issue

Overview of the problem

I’m using react-rnd version [10.0.0]

My browser is: Chrome

I am sure this issue is not a duplicate?

YES.

Reproduced project

https://codesandbox.io/s/wonderful-sara-ntpno

Description

When changing the scale the position of the Rnd elements is incorrect. (a simple zoom-in, then zoom-out demonstrates this very nicely)

Steps to Reproduce

Use size and position properties
set scale (make it changeable)
When scale up changes to scale down the issue is visible.

Expected behavior

Scale should not affect the position. The position should always remain relative to its wrapper

Actual behavior

The element jumps (jumps increase with increasing x | y positions)

rnd_issue rnd_issue_2

Issue Analytics

State:
Created 4 years ago
Reactions:5
Comments:7

Top GitHub Comments

2reactions

flwzzcommented, Jun 9, 2021

Solved this by adding position: relative to the parent element (i.e. to the “bounds” parent element)

that doesn’t work.

1reaction

Dror-Barcommented, Jul 18, 2021

Solved with the built-in prop: scale

example: https://codesandbox.io/s/vmo9ypvwl7

Top Results From Across the Web

Issue with CSS scale + position absolute - Stack Overflow

In order to fix this I added a position: absolute; on the wrapper div , which caused the title to be visible, but...

Expression added to scale transform also affects p... - 12428279

I'm using a control layer (gradient ramp) to attempt to adjust the scale of another layer but I am baffled why my expression...

scaling animation causes object end position to be inaccurate ...

Hi, This is my experience and issues - it is somewhat long, ... scaling animation causes object end position to be inaccurate [causes/fixes]....

scale() - CSS: Cascading Style Sheets - MDN Web Docs

This scaling transformation is characterized by a two-dimensional vector. Its coordinates define how much scaling is done in each direction. If ...

Position Classification Standard for Telecommunications ...

equipment, automated control and network management systems, ... developments to communications problems not susceptible to treatment by accepted methods,.