next/image flashes without objectFit property and when full width

Bug report

Describe the bug

When using the Nextjs Image component, even with loading="eager", the image flashes on page reload when used as a full width image as well as when using set width and height props without objectFit.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

check out this repro https://github.com/ryan-reach/next-image-flash-repro
/hero and /thumbnails are example pages of full width hero images and thumbnails flashing. (thumbnails are fixed when adding objectFit prop, probably just needs to be documented)
go to one of the example pages, open dev tools, go to the performance tab and start profiling + reload the page
scroll through the frames to see when the next Image component flashes, while regular img and div with background image don’t flash

Expected behavior

Nextjs Image component should behave like regular img and not cause a repaint during reconciliation, which is what I think might be happening? I’m really not sure…🤔

Screenshots

System information

OS: macOS
Browser chrome
Version of Next.js: 10.0.3
Version of React: 17.0.1
Version of Node.js: 12.18.4
Deployment: local dev

Additional context

I’m not very skilled at deciphering the performance tab, but it appears the flash is happening after Nextjs hydration and possibly right around the onload event.

I haven’t tried a production deployment yet but will update when I can.

Issue Analytics

State:
Created 3 years ago
Reactions:15
Comments:6 (1 by maintainers)

Top GitHub Comments

9reactions

Slowlcommented, Dec 15, 2020

Came into this issue for the exact same problem.

I recently rewritten some of my components to use the built-in image component but I’m experiencing flashing on page load. I didn’t have this problem before by integrating my images inside the CSS directly.

loading="eager" seems like it does 0 difference, priority={true} doesn’t help either apparently

4reactions

heysanilcommented, Dec 15, 2020

+1. I’m also seeing this flash on each page load, even with SSG/ISG pages deployed to production on Vercel hosting.

Top Results From Across the Web

Make image fill available space without specifying height or ...

Hi all, I've had trouble with this and managed to get it working by using width height at 100% and objectFit property 'contain'...

next/image - Next.js

The width property represents the rendered width in pixels, so it will affect how large the image appears. Required, except for statically imported...

React JS: Image size flickers on reload with object-fit: cover ...

I believe that object-fit: cover property doesn't get applied to the image initially and takes few milliseconds to kick in. Notice that the...

object-fit - CSS: Cascading Style Sheets - MDN Web Docs

The object-fit CSS property sets how the content of a replaced element, such as an or , should be resized to fit its...

How object-fit Property works in CSS with Examples - eduCBA

Here the height and width of the box are the same. cover: This property covers an entire container with the picture means it...