Blurred image not positioned correctly when using object-position

[schoenwaldnils]

What version of Next.js are you using?

11.0.0

What version of Node.js are you using?

14.13.1

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

Blurred images are not respecting the objectPosition property in Image component

Full image: Example Image

What I see:

Expected Behavior

The blurred placeholder should have the save position as the the later loaded full image.

What I expect:

An easy fix for this would be to mirror the object-position value to the background-position value while loading.

To Reproduce

Setup:

import Image from 'next/image'

import exampleImg from '../data/example.png'

const Page = () => (
  <Image
    src={exampleImg}
    width={1024}
    height={700}
    layout="responsive"
    objectFit="cover"
    objectPosition="center"
    placeholder="blur"
  />
)

export default Page

Deployed example: schoenwaldnils.vercel.app/objectPositionIssue

[styfle]

Hi @schoenwaldnils

Thanks for reporting this issue and providing great repro steps!

It sounds like you already came up with a solution, would you like to submit a PR to fix it? 🙂

[DarkCode01]

i would like to make this issues 😀 @styfle @schoenwaldnils

[schoenwaldnils]

@DarkCode01 you mean the PR?
Go ahead, I didn't start yet 😁

[schoenwaldnils]

@DarkCode01 how is your PR going? #26327

[DarkCode01]

@DarkCode01 how is your PR going? #26327

when Image recive the prop objectPosition, backgroundPosition is added with the same value as objectPosition.

[schoenwaldnils]

@DarkCode01 I rather means how the progress is ^^ I saw that there is a comment on the PR that there are two file changes that should not be needed