Fixed position elements jitter on mobile due to viewport size and address bars

[ludoboludo]

Describe the current behavior

Just realized something about some of the work we did and are about to do. When we do fixed position images, Image behavior: fixed background position or zoom in in the future, it does this wonky thing on mobile where as you land on the page, you have the address bar showing at the bottom (iPhone), then you start scrolling and it disappears. And whenever you scroll back up a little it comes back.
Which is annoying! Cause when using the fixed position, the image is taking 100% width and height of the viewport so there is a bit of a jump happening when the address bar disappears and go away. :shakes_fist:
It's a pain point in the industry in general, not just us FYI.

Describe the expected behavior

Ideally no jitter at all time.

Version information (Dawn, browsers and operating systems)

• Dawn Version: 9.0.0
• Chrome Version 108.0.5359.124
• macOS Version 13.1

Possible solution

Here are some ways people tackle it:
use a resize listener to adjust styling
new viewport units dvh and dvw are dynamic viewport height/width but you still get a little choppy change to the image 🤷

Additional context/screenshots

RPReplay_Final1683144633.MP4

[kimberlyoleiro]

@ludoboludo would the resize listener have any impact on performance? Do you see this bug under the Motion design umbrella?

[ludoboludo]

I think that would fit under the motion design umbrella yeah since it was introduced due to some work in that project.
Oh but my PR linked should have closed this issue.

It might be a thing that comes back when doing the zoom on scroll effect but we can be deal with it in the PR itself.

The fix was shipped in the release branch as we have a fixed option for image banner 👍