rootMargin not working until after the first time intersecting
See original GitHub issueBug Report
Describe the Bug
The rootMargin
is being ignore until after the first time the IntersectionObserver
fires isIntersecting
.
How to Reproduce
Steps to reproduce the behavior, please provide code snippets or a repository:
- Provide custom
rootMargin
and customref
- Scroll down
- Observe the
isIntersecting
isfalse
until the element is visible. - Scroll down again
- Observe the
isIntersecting
istrue
at the expectedrootMargin
CodeSandbox Link
https://codesandbox.io/s/react-cool-inviewissues495-0g4yk
Expected Behavior
Should respect the rootMargin
on the initial scroll
Screenshots
Your Environment
- Device: MacBook Pro
- OS: macOS X
- Browser: Chrome
- Version: v1.2.2
Issue Analytics
- State:
- Created 2 years ago
- Comments:9 (5 by maintainers)
Top Results From Across the Web
Intersection Observer rootMargin not working as expected on ...
Result: Image only loads when intersecting at viewport , which rootMargin seems to not be working on horizontal level. Here is an example:...
Read more >An Explanation of How the Intersection Observer Watches
Also note that the rootMargin does not work if the root element is not an actual element on the page, such as the...
Read more >Lazy loading using the Intersection Observer API
Lazy loading is a technique that allows us to delay loading nonessential content in our application until after the initial page load.
Read more >Intersection Observer API - MDN Web Docs
The first time the observer is initially asked to watch a target ... the root margin, rootMargin , when creating the IntersectionObserver ....
Read more >Intersection Observer - W3C
Publication as a First Public Working Draft does not imply ... of changes) { console.log(change.time); // Timestamp when the change occurred ...
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 FreeTop 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
Top GitHub Comments
@stramel Thank you bro, your issues really helpful.
Going to close this issue in favor of a new one to show the other issues that I have found with
scrollDirection
andinView
.