Images disappear in Masonry thumbnails and slideshow, iOS 15.1

[dstroyer]

Hi, I’ve recently updated my iPhone Xs to the latest iOS and purchased a new iPad pro 11. On both devices, today, Safari or Firefox, when I tap an image in my backlight website for a second, not quite long enough to activate the long press to open that in a preview window, the image disappears and shows the filename in a white box. This is true in the masonry thumbnails and the slideshow when a thumb or image is tapped the “wrong way” and on both of these devices. Strangely, it does not appear to be happening on my older iPad pro 10.5 which is also updated to iOS 15.1.

If I’m scrolling through the thumbnails, I can make every image go blank (turn to file name in a white box) as I do so, if I’m not sort of already swiping by the time my finger touches the screen. Is there some setting in backlight that might fix this? So far, every other website I’ve tried to replicate this on, does not have the problem on either device in either browser. I can send you a screen recording from my iPhone, if you’ll let me know where.

Thanks, as always!

[rod_barbee]

I’m updating my iPhone SE to 15.1 as I type and I’ll test on one of my albums.
It might help if you post a link to one of your albums that’s exhibiting the problem. That way Matt and Ben will have something to look at.

[dstroyer]

Thanks! It’s the only one there on www.dstroyer.ca - I’m still in “testing” phase of a new build, so not much going on yet on the public page.

I have discovered that the glitch also affects my logo and a standalone image on the main page. FWIW, in the slideshow, it is more difficult to make it happen, but it does happen with the right set of touches.

So far I can’t get it (this new “feature”) to work on the “map” that I have on the contact page (it’s just an image) when the menu comes out from the right.

Can I send that screen recording to you somehow?

[rod_barbee]

@dstroyer

Can I send that screen recording to you somehow?

It wouldn’t do any good for me to see it, but perhaps the developers (Matt and Ben) will ask to see it.

[Matthew]

My best guess is that Safari has broken either the masonry or lazy-loading JS. I’m not seeing any reasonable cause for it, though. I mean, I don’t think there’s a bug in Backlight or on your website; I think Safari just sucks at handling images as it’s supposed to.

So far, I am not seeing this issue using the Classic or Justified grid layouts, so you may want to move away from Masonry.

[rod_barbee]

I can see the problem using my iphone (iOS 15.1) on your site. But I can’t replicate the problem on my own test site using a Masonry album.

[dstroyer]

Hi Matthew,

Thank you for your response…

Agreed about Safari, sometimes it is less than stellar, however I can replicate exactly the same thing on my brand new iPad Pro and my iPhone XS in both Safari and Firefox. I cannot replicate it on my iPad Pro 10.5 or even older iPad Pro 9.7 (all iOS 15.1). Thought you should be aware of that little tidbit… I have also now tried Opera and Edge, with the same result on my two newer devices with the images going away and the file name appearing in the white box. I have also tried numerous “masonry” galleries on Wordpress sites, both live as well as demos and cannot replicate this behaviour. Very strange. I have hard rebooted both devices, cleared all website data for my domain in my browsers, etc…

Based on this, I’d love to think it was just broken Safari after an OS update, however it seems to be related, somehow, to my site. I verified, a couple of days ago, with a senior support person from my hosting provider that I had cleared out all of the old Wordpress “junk” that was related to my previous site and that all looked clean. I’ve reviewed my directories again just now via FTP and don’t see anything leftover.

Again, if you hadn’t noticed this little detail - somehow the .png (others are jpgs) file for my “map” on the side of my contact page is not affected. Also strange.

Anyway, if any of this means any more to you now, I’d love to figure it out… of course, my devices are my main testing devices and this will drive me crazy as I finish the build out, wondering if I’ll have to do it all over again, or if others are experiencing the same behaviour.

Thanks again for your help! I’m thrilled to be using your systems, overall - I wish I’d taken the leap sooner… was a user of some of your early galleries and then strayed for now good reason.

Cheers,

~ds

[dstroyer]

Hi Rod,

I tapped the top “banner” on your site and your image / title went away… This is in Safari on my iPad Pro 11 / iOS 15.1 if we need to ask.

See attached…

Cheers,

~ds

[dstroyer]

And here’s one from a gallery on your page…

@Matthew - if you didn’t see my reply above to Rod, his site is exhibiting this as well, in more than one location, for me.

[rod_barbee]

I’m seeing the same on my site using my iPhone (iOS15.1)
Updating iPad now to check with that.

My albums are using the Justfied layout.

[Matthew]

All browsers on iOS use the same underlying engine that powers Safari, as is required by Apple. This is different from desktop or Android browsers, where browsers are built on a handful of different engines, with Chromium being prominent. So if the Safari bug is in the iOS 15 version of the engine, then it’s likely to appear in all browsers on iOS.

[Matthew]

I’m seeing the same issue on your site using desktop Safari, just hovering over your thumbnails. Have you implemented any hover effects on your thumbnails?

Can you try removing the @ characters from your filenames?

[rod_barbee]

Both my phone and iPad are running iOS 15.1
On my own site, I can see the problem happening only on the iPhone. Doesn’t happen to all images but once it does happen, it consistently happens to the same images, at least during the browser session.

When I refresh the page, all images return, but I can still get the same ones as before to disappear.

I tried changing crop dimensions on some pictures, thinking perhaps it might have something to do with odd pixel dimensions and the math displaying the image in the container.
Also tried messing with the metadata field being displayed for Img Alt.

No matter what, the same images were affected.

[Ben]

I have tried @rod_barbee and @dstroyer‘s sites on iPhone and iPad running 15.1 and don’t see this issue at all.

[dstroyer]

@Matthew @rod_barbee @Ben

Thanks guys.

Matt, I knew Apple had their rules on what installed apps could do, but didn’t know they were not “themselves” when it comes to the browsers… very interesting. I’m running macOS Big Sur, 11.6.1 - I have not been able to recreate this on my main computer. Are you running the latest OS?

So far as I know, I have not implemented any hover effect - I’ve just gone looking through the gallery settings and don’t see anything - is there a setting somewhere that I’m missing. I certainly have not inserted any custom code yet… The only thing I’ve done in terms of code is a right align for the text under the PNG of the map on my contact page - everything else so far is “stock” with a few minor tweaks for colours, fonts, etc. My logo is affected on all pages - also not customized with any effects other than stock Backlight stuff for position and no © or @ sign.

Forgive me here - I had said Masonry in the subject, however my gallery was set to “Justified” and I’ve just realized this when checking on some settings… It had been Masonry when I first loaded it. That said, I’ve just switched it to Masonry and same effect - back to Justified, still same.

Rod, on your site, I can make just about any image have this happen to it - including things like your links to Think Tank and others in the right column… more screenshots if you like - just let me know.

Ben, what physical hardware do you have for your iPhone and iPad - one of my notes from earlier was that it’s not happening on my older devices, it would appear anyway - my iPad Pro 10.5 (2017’ish) and my iPad Pro 9.7 (2016) don’t seem to be affected, even though all are running iOS 15.1. It takes kind of a medium press, so not quite long enough to have it try to load a preview of the page that’s linked, but longer than just a tap and never happens if there’s already a swipe movement on contact with the screen. So a one second press in place, if that makes sense.

Not sure what else to say guys - I’m scouring the Internet for other problem sites / images that this happens to and it’s all Backlight / iOS 15.1 / newer devices, best I can tell - takes those three conditions to be met - and for Matt, apparently desktop as well, on whatever machine / OS he’s running currently.

Here’s a screenshot of the main ttg.net page - the “feature” works there as well for me…

[rod_barbee]

Ah, nebulous, ephemeral and intermittent bugs. The joy of all troubleshooting…

[Ben]

Hi @dstroyer, sorry I hadn’t picked up that this happens after holding down on the image. I can see the problem now. I’m using iPhone XS and iPad Mini 5.

[Matthew]

We have a potential lead on this issue. Investigating …

Will update.

[dstroyer]

Just an FYI from my end… my new MacBook Pro arrived (this is great news) and this is my website in Safari on Big Sur - just mouseover on each visible image on the screen in my gallery…

[Sol]

Hey Guys,
Any further revelations on this. I’m seeing this on my Mac Safari desktop as well.
Page loads fully, but then as I hover my curser over a thumbnails, about a second later, each image will go away, with only description remaining.
I have to reload the page to make them reappear.