Image lazyBoundary prop not working with a container different than 'root' #33125
Description
Run next info (available from version 12.0.8 and up)
No response
What version of Next.js are you using?
7.20.3
What version of Node.js are you using?
16.7.0
What browser are you using?
firefox
What operating system are you using?
windows 10
How are you deploying your application?
next start
Describe the Bug
Image tag from next/image is using lazy-loading by default, using 'lazyBoundary' prop for adjusting the rootMargin option of the Intersection Observer Api. (defaults to 200px) . The problem is that this works only in relation to the viewport, meaning that when you have a container other than root with overflow:auto containing the Images, the lazyBoundary is not working correctly since you can not set a prop option similar to "root" of the Intersection Observer Api. So far I have managed to add manually that prop by editing the source code at next\dist\client\use-intersection.js and next\dist\client\image.js and temporarily fix the issue but that of course is not viable.
Expected Behavior
We need a new prop of the Image component for being able to set the root container for adjusting the lazyBounary (rootMargin) behavior.
To Reproduce
Create an absolutely positioned container , for example "div" , give overflow:auto, add some Image components inside ,give a large lazyBounary for example 1000px and check that despite the lazyboundary setting the image will only load when it becomes visible.