Image blur placeholder not taking full width with fill image

[Kerumen]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Thu Sep 29 20:13:56 PDT 2022; root:xnu-8020.240.7~1/RELEASE_ARM64_T6000
Binaries:
  Node: 16.13.2
  npm: 8.12.1
  Yarn: 1.22.19
  pnpm: 7.14.2
Relevant packages:
  next: 13.0.2
  eslint-config-next: 13.0.2
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome 107.0.5304.87

How are you deploying your application? (if relevant)

No response

Describe the Bug

When using the Image component (Next.js v13) with fill and a blurDataURL, the blurred placeholder is not taking the full width of the viewport as the loaded image does.

Blurred placeholder	Loaded image

I stumbled across this PR which fixed some bugs related to the blur placeholder. It seems that adding preserveAspectRatio="none" to the generated SVG without width / height would fix the issue but I don't know the implications.
Also, why is it an SVG and not just the base64 image as it was on Next.js v12?

Expected Behavior

The blurred SVG should take the full width of the viewport and not display empty spaces around the image. It was working correctly on Next.js v12.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://codesandbox.io/s/goofy-orla-v8kciw

To Reproduce

Use an Image component with fill and a blurDataURL.

[styfle]

It seems that adding preserveAspectRatio="none" to the generated SVG without width / height would fix the issue

If the viewBox attribute isn't set, the preserveAspectRatio attribute has no effect see mdn

Although its worth trying it out and seeing if it works without causing artifacts like #40419

why is it an SVG and not just the base64 image as it was on Next.js v12

SVG blur performs better compared to CSS blur. It also means we don't need JS to remove any CSS once the image loads.

Link to reproduction

Thanks I was able to reproduce! This is entering the deopt mode here where the width/height of the blurDataURL are not known so it falls back to CSS blur.

next.js/packages/next/shared/lib/image-blur-svg.ts

Line 26 in fe762d3

return `%3Csvg xmlns='http%3A//www.w3.org/2000/svg'%3E%3Cimage style='filter:blur(20px)' x='0' y='0' height='100%25' width='100%25' href='${blurDataURL}'/%3E%3C/svg%3E`

Another thing we could try is adding new props for blurWidth and blurHeight to next/image that complement the blurDataURL prop.

[jeff-overhaul]

Adding preserveAspectRatio="xMidYMid slice" to the <image> tag in the SVG preserves the "cover" background behaviour. You don't need viewBox when the attribute is added to the image tag

[styfle]

Thanks, I created #44317 with a fix! Its difficult to test all the cases here without manually looking at the result so I'll need to make sure it doesn't break anything else.

[vimtor]

We upgraded to the new Next.js image and encountered the same problem. I'm not sure if this helps but using aspect ratio in the wrapper element solves the issue. Unfortunately, it cannot be used for our application.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.