Zoom not working in Safari (desktop or iOS)

[bjhewitt]

This was referenced in passing on another thread, but I'm it pulling out as a separate issue - the IIIF zoom viewer is not working/blank in both desktop and iOS Safari (v17.1 desktop), with no console or network errors. I can see that image tiles for the zoom ARE loaded (although I can't guarantee that it's ALL of the images tiles).

Thanks, Greg. I see now that the zoom is working in Chrome, but it is not working in my older version of Safari (v 14.1.2). I will update my Safari, and hopefully the zoom will work there as well. Do you have a sense of when the +/- buttons will be brought back? I think that would really help our users (and the author of the book).

Originally posted by @zsofiaj in #703 (reply in thread)

[Erin-Cecele]

Thank you for posting this issue @bjhewitt. Let me do some testing on my end. I may be in touch for additional details.

[Erin-Cecele]

Hi @bjhewitt, I see the issue in your project, although I was not able to recreate it in the starter project, so I'm not sure where the root cause is. I just reached out to @zsofiaj to see if she was able to bypass this roadblock. I'll also work with the team to try and get to the bottom of it. For record-keeping purposes, I am on Version 16.1 of Safari.

[Erin-Cecele]

This issue is also being discussed in issue #703 and discussion #897. Will limit all further updates to this issue.

[bjhewitt]

Thanks, @Erin-Cecele . Yes, the base project/site does work for me in Safari as well, which throws some doubt at the Safari privacy notion. It does seem likely that Safari is being fussier about SOMETHING than Chrome and Firefox, but I'm wondering if there's something in our project's content/data that's causing an un-closed tag or something like that, which other browsers ignore and Safari doesn't. Again, I'm just speculating here.

I have posted the site to Netlify as well. Sample issue at https://roman-glasssblowing-dev.netlify.app/catalogue/long-necked-vessels/catobj--14/ (or anything else in the catalog).

[zsofiaj]

@Erin-Cecele and @bjhewitt I updated my OS this weekend, which allowed me to finally update Safari to the latest 17.3, and now all of my IIIF images are zooming, no further problems. A little embarrassing when a delayed update fixes everything, but hopefully this is helpful information, at least. I am also able to see the image and zoom on the roman glass object at the link above. But now I see that @bjhewitt is on Safari v17 as well, so maybe something else changed as well?

[bjhewitt]

Alas, @zsofiaj - yes, I'm on Safari 17.3 (desktop) and still having the same issue. On the good news front, I've discovered that removing CSS position:fixed on the .quire-entry__lightbox containing div reveals the element! (although the placement is obviously off then). Substituting position:absolute doesn't work. I'm thinking there's a z-index stacking context issue somewhere that's only affecting Safari (for me). Stay tuned

[bjhewitt]

Ok, I've got a solution, and it is indeed related to z-index/stacking context. The default theme CSS has z-index:10 (+position:sticky @ < 700px width, position:relative for 700px+ width) for selector .quire-entry div.side-by-side div.quire-entry__image-wrap. I did an override in my CSS with: z-index:unset and that reveals the element and doesn't seem to affect any other elements, as far as I've seen.

[Erin-Cecele]

@zsofiaj @bjhewitt can you both let me know what version of Quire you are on? Please run quire info --debug and share all the resulting output. Thank you!

[zsofiaj]

@Erin-Cecele The quire info --debug command doesn't work for me (says error: unknown command 'info'), but I ran quire --version, and I got this:

1.0.0-rc.7