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.

[BUG] flickering when switching between position relative/absolute during drag

See original GitHub issue

2. Describe the bug

When changing properties like position absolute or fixed from relative while dragging the layout projection seems to flicker. When setting fixed specifically it looks like the coordinates don’t get applied correctly.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

Codesandbox

4. Steps to reproduce

Steps to reproduce the behavior:

Drag an item in/out of the container

5. Expected behavior

Expect the layout to not shift or flicker when changing position during a drag.

6. Video or screenshots

drag

Issue Analytics

State:
Created 3 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

mattgperrycommented, Aug 13, 2020

The error should be fixed in 2.4.1

On Thu, 13 Aug 2020 at 02:03, Travis Arnold notifications@github.com wrote:

Updated to the latest version (2.4) and now I’m seeing this error when setting any React state during a drag and using AnimatedSharedLayout. If I comment it out all seems to work fine, just no container animations.

[image: image] https://user-images.githubusercontent.com/2762082/90079731-92520580-dcbd-11ea-8faf-8e2c40713e32.png

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/framer/motion/issues/698#issuecomment-673168101, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB34WKRQ3CZ77EC2PJVGFOTSAMUVFANCNFSM4P2OWO5A .

0reactions

souporseriouscommented, Aug 27, 2020

This Codesandbox might help showcase it better. Just tried to do similar things I had in my complex demo by changing some values in the minimal demo you made while dragging and trying to use the layout prop.

Top Results From Across the Web

html - Absolute Positioning Causing Flickering - Stack Overflow

I have two pages that are making use of absolute and relative positioned elements at the top of the page. The issue is...

Why moving elements with translate() is better than pos:abs ...

In modern days we have two primary options for moving an element across the screen: using CSS 2D transforms and translate() ...

Content Jumping (and How To Avoid It) | CSS-Tricks

To fix it, I used the browser's DevTools to measure the height of the resulting content and hardcoded it as a min-height for...

4 reasons your z-index isn't working (and how to fix it)

Solution: Move the modal outside of the content parent, and into the main stacking context of the page. ... Now, the modal element...

1585378 - CSS position: sticky causes flicker while scrolling

Attempt to scroll (any direction, any method: trackpad, wheel, shift+wheel, drag on scrollbar). Actual results: You'll see substantial flickering of the content ...