-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Files] Fix image intersection observer behavior #143843
[Files] Fix image intersection observer behavior #143843
Conversation
…sures the intersection observer will fire
Pinging @elastic/kibana-app-services (Team:AppServicesUx) |
💚 Build Succeeded
Metrics [docs]Async chunks
Page load bundle
To update your PR or re-run it, just comment with: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested, works well!
Example app looks nice!
Summary
Occasionally the observer does not fire with a "visible" event for the image tag. This happened because the img tag was placed below the blurhash and could be pushed out of view in a component with overflow hidden (as is the case in the file picker #143111). The result (see screenshot) is that the image can get "stuck" on the blurhash.
This PR makes the image tag appear "on top" of the blurhash so that when the container is scrolled into view it will render correctly.
Original context: https://github.com/elastic/kibana/pull/143111/files#r999145694
Also removes the "lazy" option from the
Image
component since it should, preferably, always load lazily.How to reproduce the issue
On main
--run-examples
The issue