search

facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
227.14k stars 46.31k forks source link

[DevTools Bug]: Cannot hover/click elements after scrolling #22122

Open eps1lon opened 3 years ago

eps1lon commented 3 years ago

Website or app

https://9tdhf.csb.app/

Repro steps

  1. disable any component filter
  2. scroll component tree
  3. hover any element

https://user-images.githubusercontent.com/12292047/129872819-0e3c06aa-fc24-4c15-84c7-73940eb136b3.mp4

How often does this bug happen?

Every time

DevTools package (automated)

1d2528097

DevTools version (automated)

4.16.0

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

iunfixit commented 3 years ago

cant reproduce on windows, firefox or chrome, filters disabled

eps1lon commented 3 years ago

Reproducing on Chrome Version 92.0.4515.131 Ubuntu 20.04. @iunfixit Which version of Chrome are you using?

iunfixit commented 3 years ago

92.0.4515.159

eps1lon commented 3 years ago

92.0.4515.159

Can reproduce on 92.0.4515.159 as well.

iunfixit commented 3 years ago

Chromium 92.0.4515.0 on Windows, I can try on Linux later but here it looks fine unless I'm doing something wrong

DevTools

bvaughn commented 3 years ago

@eps1lon and @iunfixit: Can you both check chrome://flags/#enable-throttle-display-none-and-visibility-hidden-cross-origin-iframes and see whether enabling/disabling this changes the behavior you're seeing?

iunfixit commented 3 years ago

Yes, enabling that also enabled the bug

Bug

bvaughn commented 3 years ago

Ugh :( That flag.

eps1lon commented 3 years ago

Just verified that I can also reproduce on windows

@eps1lon and @iunfixit: Can you both check chrome://flags/#enable-throttle-display-none-and-visibility-hidden-cross-origin-iframes and see whether enabling/disabling this changes the behavior you're seeing?

That's probably it. Can only reproduce the problem with the flag enabled.

iunfixit commented 3 years ago

When testing on the Windows machine I noticed the same happening on the profiler tab too, in case its relevant

bvaughn commented 3 years ago

I have an in-progress fix (#22141) but it is not currently working for Firefox (extension only). Still debugging.

bvaughn commented 3 years ago

Related CR bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1241986

Haven't been able to repro this specific issue yet.

lukeingalls commented 2 years ago

Disabling the chrome://flags/#enable-throttle-display-none-and-visibility-hidden-cross-origin-iframes did end up fixing this for me. When it's enabled I still get this in chrome 96.0.4664.55

bvaughn commented 2 years ago

I don't think there's anything we can do to fix this on the React side. I've tried several workarounds but none of them worked.

FWIW I reported the issue to Google but was unable to provide them with a sufficiently small repro. They didn't seem to think it was high priority given the feature isn't being rolled out widely (which I kind of disagree with, but there's not much I can do about it).

onpaws commented 2 years ago

Thank you for sharing suggestions here, I've been hit with this issue for a while now, and until I found this thread I suspected it was Vimium keybindings or something. TIL!

Disabling chrome://flags/#enable-throttle-display-none-and-visibility-hidden-cross-origin-iframes also worked for me🙏

Chrome Canary 103.0.5056.0 macOS 12.3.1 (21E258)