Problem with next/image component in NextJS 10.0.10+ and Preact

[vaypoldev]

What version of Next.js are you using?

10.0.10-canary.8

What version of Node.js are you using?

14.16.1

What browser are you using?

Edge Chromium

What operating system are you using?

Windows 10

How are you deploying your application?

Describe the Bug

The images are downloading even though I haven't scrolled yet and they aren't on the viewport.
I've hardcoded the priority prop on false and still doing this behavior.
This only happen when I use Preact and Nextjs version equal or greater than 10.0.10-canary.8.
On 10.0.10-canary.7 all is working fine, the images download only when in viewport and I've scrolled down.

In this PR (10.0.10-canary.8) there where changes related to image component, the css property visibility: hidden was removed. I think this is something related to this issue.

Codesandbox: replicate issue

Expected Behavior

Download the image only when they're in viewport or reached the 200px trigger from next/image

To Reproduce

• Video showing the issue

• Replicate issue on codesandbox

[Dragate]

I am seeing the same behaviour (no lazyloading when using preact) on Next.js 11+. It has to do with the noscript tag. Applying this workaround preactjs/preact#2797 (comment) solved the issue for me.

[vaypoldev]

I am seeing the same behaviour (no lazyloading when using preact) on Next.js 11+. It has to do with the noscript tag. Applying this workaround preactjs/preact#2797 (comment) solved the issue for me.

@Dragate Thank you so much! I've applied that patch to my project to something like this PR and is working fine.
I'm going to close this issue since this isn't related to NextJS but react not following the HTML specs when handling noscript tags.

[Dragate]

Update: It seems the workaround is no longer necessary from 11.1.1

[knenkne]

Update: It seems the workaround is no longer necessary from 11.1.1

I think i still face the issue at next@11.1.2 and preact@10.5.14

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.