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.
Scroll stucks when having fixed overlay with pointer-events: none
See original GitHub issueDescribe the bug
When using a fixed overlay with pointer-events: none the scroll stucks in chromium based browsers.
Your minimal, reproducible example
https://stackblitz.com/edit/vitejs-vite-9muacn?file=src%2FApp.tsx
Steps to reproduce
- Try scrolling in chromium based browser
Expected behavior
- Scrolling should be smooth
How often does this bug happen?
No response
Screenshots or Videos
Platform
- OS: macOS
- Browser: Chrome, Edge, Brave and every other Chromium based Browser
tanstack-virtual version
3.0.0-beta.2
TypeScript version
latest
Additional context
- Using the solid implementation
Terms & Code of Conduct
- I agree to follow this project’s Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Issue Analytics
- State:
- Created a year ago
- Comments:11 (1 by maintainers)
Top Results From Across the Web
Disable all pointer events except scroll on overlaying div
Background: *What I am trying the achieve is similar to what Perforce P4Merge has done with thier diff tool. They have one vertical...
Read more >pointer-events - CSS: Cascading Style Sheets - MDN Web Docs
The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
Read more >HTML : Disable all pointer events except scroll on overlaying div
HTML : Disable all pointer events except scroll on overlaying div [ Beautify Your Computer : https://www.hows.tech/p/recommended.html ] HTML ...
Read more >pointer-events | CSS-Tricks
The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, ...
Read more >4 reasons your z-index isn't working (and how to fix it)
Z-index is a CSS property that allows you to position elements in layers on top of one another. It's super useful, and honestly...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Also this is how it looks in Chromium v100. For me it is clear that it is a bug in latest chromium version.
https://user-images.githubusercontent.com/17291660/172660744-5113580a-cdb0-4535-a5d0-2c93b4996d79.mp4
https://codesandbox.io/s/mystifying-mayer-xxq3rv?file=/src/main.tsx Yeah I was able to replicate this. It definitely happens on React example as well. I’ll take a look at this after work today. Thanks for pointing this out 😄