Site display problems with Monterey 12.3.1? Webkit issue?

[lehmanad]

I heads-up to those of you who (like me) have updated to the latest version of Monterey. I’ve noticed that one of the sites I recently made does not display correctly when viewed with Safari 15.4 running on OS 12.3.1. The same goes for RW preview mode on Macs running 12.3.1. Everything looks fine in Chrome and Firefox and in Safari on an old iMac running Catalina. (The site is basically built with Source / BWD / Multitheme stacks.) I suspect this is a Webkit issue, not a Stacks issue.

The problem is that some grid items—and in two places, entire grids—are simply missing from the page. You can see the problem here: https://www.jeffkeeling.com

At the bottom of the first section, “Fashion & Apparel,” a 2-column grid is missing.
In the “Automobiles” section, the first grid item (a Beyonce TV commercial) is missing.
In the “Sports & Leisure” section, everything displays OK.
In the “Beauty & Cosmetics” section, the central grid item of a spiral grid is missing.
In the “Corporate Identity” section, the first two grid items are missing.
In the final section, “Consumer Products,” all of the content (a 5-item grid) is missing.

At the client’s insistence[!], the site contains no copy at all, so the absence of any text is unrelated to the issue described above.

[Kent]

Hej

Sorry, but everything displays correctly on my mac with MacOS 12.2.1 in Safari.

Kind Regards

Kent

[Geoff]

Check to see if there’s a s-grid-item overflow clash… I toggled the overflowfrom hidden to auto and back again and it solved the problem.

But only temporarily.

[Webdeersign]

Works fine on Safari 15.4 on Catalina for me too as you mentioned.

This points to another issue with the latest Safari. Geoffs clever observation may support that.

However, there is an animated related JS error on teh homw page, so I would start the detective work by removing any animation stacks and republish. My next step would be to delete all local files and the server files, do a republish all files and use an FTP App to update all files.

Probably not releated to this issue, but I notice that on an iPhone, there is a large empty screen sized area below the first animated banner with a low contrast scroll down message - see below.

Also you have 6Gb of stuff on that page!

[habitualshaker]

If you want to use loading="lazy" then you should also really add in a width and height attribute too. e.g. for the beyonce image: width="1512" height="853". The default way Image Fit stack works is for the image to fill the available space in the grid but as there is nothing to set the available space when the page loads then it doesn’t appear. Providing these attributes should fix things. This isn’t an issue in most browsers as you say but it is best practice to provide these attributes anyway.

The other way would be to specify a height in the image fit stack settings.

Let me know if you still have some trouble.

[lehmanad]

If you want to use loading="lazy" then you should also really add in a width and height attribute too.

Thanks, Stuart. I’ll give it a try first thing in the morning. Taking a tip from your blog, I did add basic width/height specs for images that visibly shifted on first load (not accurate, just to indicate aspect ratio), but applied ‘lazy’ to my own work ethic on most of the other images. Mea culpa!

[lehmanad]

Many thanks to all who responded. Stuart’s solution did the trick, although instead of specifying the actual pixel dimensions of each image (two sizes were provided for each) I just used 600/400 or 400/600 to indicate the aspect ratio.

However, there is an animated related JS error on teh homw page, so I would start the detective work by removing any animation stacks and republish. My next step would be to delete all local files and the server files, do a republish all files and use an FTP App to update all files.

I had noticed the JS error and suspect it’s related to the Multitheme ‘Boxed Titles’ Hype stacks. But the stacks work as advertised, so for the time being I’ve ignored it. As for publishing, I always publish to a local folder, delete everything on the server, and then upload via FTP.

Probably not releated to this issue, but I notice that on an iPhone, there is a large empty screen sized area below the first animated banner with a low contrast scroll down message - see below.

Yasss. That is most unfortunate and displeases me greatly. That space was originally occupied by a short paragraph about the client. He (a copywriter by trade) worked on the text for two months, producing numerous versions, but eventually called me up and said, “I don’t want to have any copy on the website.” I tried to reason with him, but … anyone who is willing to pay me half a million yen to make a website gets to have their own way. So that left me with two animated elements (top banner movie & section banner) appearing in the viewport at the same time, which is a criminal design offense, IMHO. So I added a variable-height “scroll down” section (hidden in widescreen view) that expands as needed to keep the animated Fashion & Apparel banner out of the viewport at narrow screen widths. It’s definitely a kludge though, and I’m not happy with it. It’s a sad case of eye candy winning out over content.

Also you have 6Gb of stuff on that page!

Not sure where or why you’re seeing 6GB of stuff. The entire package (all files, folders, images, scripts, etc.) comes in at 175.4MB.

Anyway, thanks again to all. I will certainly make it a point to specify image width and height in lazy loaded Image Fit stacks going forward. Since the problem only becomes evident in Safari post-Monterey 12.3, it’s something to keep in mind if you’re running an earlier version of the OS.

[Gianluca]

To set explicit width and height in image elements in Image (Source), Image Fit (Source) and Srcerer?
Where should it be set?

[Webdeersign]

Great to hear that Stuart’s advice to add in the image dimensions has solved the initial issue.

@lehmanad

Not sure where or why you’re seeing 6GB of stuff.

I initially ran your site through PageSpeed - see https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.jeffkeeling.com%2F which can be useful to see sizes and where any delays are occurring.

I am most sorry, and what I mean to write was 6Mb of stuff, which is still too big.

Avoid enormous network payloads Total size was 5,529 KiB

Interesting to hear what your Copy Writer was demanding. I created a WP site for a Copy Writer who demanded WP, so that she could edit the “copy”. She struggled to provide basic text so I wrote it and she planned to update it. She hasn’t changed that text, even after 2 years.

She had a fundamental belief that good copy writing did not need to promote itself and in particular should not follow any basic SEO structure. She didn’t want people to find her site just because a search engine found the site. Good copy writing was above that in her opinion.

It’s a funny old world.

[Gianluca]

@Gianluca

To set explicit width and height in image elements in Image (Source), Image Fit (Source) and Srcerer?
Where should it be set?

I can’t figure out where to put the dimensions …

[habitualshaker]

You can add the dimensions to the ‘Custom attributes’ box in the stack settings. There is a bit more info in this Source blog post.

[Gianluca]

Thank you, found 👍