Background Resizes When Scrolling

Emrys

Hello!

On my SmugMug site https://www.dreamstreetportraits.com
I have noticed my background images resize when scrolling up or down on a mobile device. I understand that it happens due to the URL top bar and the bottom tool bar. When you scroll it disappears and the background resizes to the new screen real estate. It occurs everytime you change scrolling directions.

I was told this is intentional and impossible to change. However, surely there is a way to allow the URL top bar and the bottom tool bar to do their thing without resulting in a noticeably buggy looking background.

Check it out, whenever you scroll up or down the background resizes... Any suggestions for this?

Thanks in advance guys!

Kind regards,
Emrys Rowles

Hikin' Mike

Not seeing any issues. Your background is fixed when I scroll.

Emrys

Hey Hikin' Mike! I should have mentioned the problem occurs on mobile devices. I have edited my original post. It occurs everytime you change scrolling directions.

Have you tested it on a PC or mobile?

Hikin' Mike

I don't own a mobile, so I just resized my browser window to replicate a mobile.

Emrys

Thanks for your help

The issue only presents on mobile devices. It won't display on screen resolution simulators as the top URL stays fixed. I've tested it.

Emrys

Anyone know how to define background image lengths in viewport Units (i.e. vh) using CSS on SmugMug?

According to the website below, defining the lengths in VH should stop the background resizing in response to the URL bar being shown or hidden.

https://developers.google.com/web/updates/2016/12/url-bar-resizing

Many thanks!

Emrys

Alright, fixed it. Anybody having this issue simply needs to add the following code.

.sm-page-hasbackground>.sm-page-background {height: 100vh}

Mobile experts said it couldn't be done