Image set to "contain" on mobile is behaving weird



The problem is because in the head of your page in a style tag (not an external script) you have this css:

.slideshow__image {
	height: 100%;
	width: 100%;
	object-fit: cover;
	z-index: 1;
	transition: opacity 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87), filter 400ms, -webkit-filter 400ms;
	font-family: "object-fit: cover";

Ignoring the invalid font-family family value for now the issue is that you have set the image to cover.

object-fit: cover;

Further down the page you have an external stylesheet:

<link title="theme" rel="preload" href="//" as="style">

In this stylesheet you set the image to contain.

Therefore when the page loads the css in the head is immediately available and the image styled as cover. Once the stylesheet loads which could take half a second or so the image is then changed to contain which is why you get the jump depending on connection/browser speed etc.

From what I can see you never use the value 'cover' anyway so change the css in the head of your page to contain to start with.

I assume you had it duplicated in the head of the page as some sort of above the fold immediate styling and that is exactly why you are getting a double effect.


@PaulOB I'm still learning a lot of this so it was a little difficult for me to understand what was happening, but your post made me look for other files in the site that may have been setting other styles and you were right about this. There was a file called "critical-styles.css". This file had styles for the slideshow that were creating a conflict when loading the page. I applied the same changes to the styles in this file and now it appears to be working correctly, without the image resizing while the page is loading.

Thanks SO, SO much for your reply. You have really helped me understand where I should be looking to fix this, and I have learned something in the process. :slight_smile:

Thanks everyone else who also replied and tried to help. I really appreciate you taking the time to write.