XF 2.1 Suggestions on how to debug an iOS browser issue with an XF addon for a non-Apple user? 🤔

Kevin

Well-known member
Well, this week I updated Cameraderie to XF 2.1.x and I replaced the Featured Threads from XF 1.5.x with a custom home page to feature attachments. It's a WIP with stuff to be added yet.


On my Dell XPS 15 (with touch screen) everything looks fine. On my Android devices everything looks fine. On a Win7 machine everything looks fine. I've tried Chrome, IE11, Edge, FF... all looking good.

But then the iOS users took a look and, well, things weren't so great after. From looking at a sample screen shot that was sent to me (copy attached) my best guess is that the 3rd-party javascript utility I'm using to present the preview images in a 'justified gallery' fashion is either throwing an error or doesn't like Safari on iOS.

I have no Apple devices at my disposal. I was thinking of maybe signing up with "Mac in Cloud" service provider for a Mac VM because, from what I am reading, I could then "Web Inspector" in Safari to take a look at the page.

Any suggestions on how to debug this one short of paying for a Mac VM service? Would the ancient version of Safari for Windows reveal anything?
 

Attachments

Brogan

XenForo moderator
Staff member
Welcome to the wonderful world of browser and OS compatibility.


I have nothing more to add :D
 

Ehren

Well-known member
The same issue is happening with the desktop version of Safari on Mac.

The script is being loaded, but you have css with !important tags which is overwriting the dimensions.. The max-width on .itemList-item probably shouldn't be there either. It seems like a css issue rather than an issue with the script.

A screenshot of the web inspector is below which shows that the heights should be 170px, but the css is breaking it. Not entirely sure why it's only happening in Safari though, but it certainly isn't isolated to iOS :)

195099


Edit: XenForo resized my screenshot quite a lot which makes it harder to read, but hopefully you get the point :)
 

Kevin

Well-known member
Probably not, it's not been touched in years

you can try browserstack.com, I think they have a free version or a trial
I guess it also depends on when the Safari rendering engine was last updated as well. :D For the VM I was thinking of going with "MacInCloud" for a month to try it out.
Welcome to the wonderful world of browser and OS compatibility.


I have nothing more to add :D
Fortunately for my 'day job' our standards are Win with IE but migrating to Chrome and FF allowed as an alternative. There are plenty of Macs but not officially supported; if something doesn't work on them, switch to a standard corporate issued workstation.
The same issue is happening with the desktop version of Safari on Mac.

The script is being loaded, but you have css with !important tags which is overwriting the dimensions.. The max-width on .itemList-item probably shouldn't be there either. It seems like a css issue rather than an issue with the script.

A screenshot of the web inspector is below which shows that the heights should be 170px, but the css is breaking it. Not entirely sure why it's only happening in Safari though, but it certainly isn't isolated to iOS :)

View attachment 195099


Edit: XenForo resized my screenshot quite a lot which makes it harder to read, but hopefully you get the point :)
That helps, thanks! I know a few folks with MBPs so I might be able to hit them up to borrow a machine for testing, if not I know then getting a Mac VM will be enough.
 

Ehren

Well-known member
That helps, thanks! I know a few folks with MBPs so I might be able to hit them up to borrow a machine for testing, if not I know then getting a Mac VM will be enough.
If you make any changes to the code which you think has fixed it, and if you still don't have access to a Mac, just let me know and I'll be happy to take a second look :)
 
Top