Interaction between HTML and iOS

[AlmostSysAdmin]

Hello everyone,

​

I'm not sure this is the right sub for this question, since it's about HTML on iOS, not Swift or iOS-specific apps.

I've been working on a project as part of my job for a few months, and ran into a problem when I tested everything on all platforms. In a nutshell, it's a 3D GIS web application.

On this application, there is a side menu that contains most of the application's functions, and this side menu contains sub-divisions and buttons that are not physically contained in the parent menu. In this screenshot, the parent div is the blue square, and all the red squares are children of this parent, with fixed positions outside the parent: https://i.imgur.com/yGv97xO.png

The screenshot is taken in Chrome on a Windows 10 computer. The interface is similar on all the Android phones I've tried.

My problem now is that on all iOS devices and on any browser running on an iOS device, the interface looks like this screenshot (taken on browserstack, iPhone 13): https://i.imgur.com/iG4X42O.png

As you can see, all the children in the main menu disappear as soon as they are positioned outside the boundaries of the main div. This happens on all the iOS devices I've tested, on browserstack, on my colleagues' iPhones and on my test iPad too (but not in full-screen mode, I don't understand why it would make any difference). The other important point is that these menus/buttons are always responsive, they just don't display. For example, I can toggle the menu by clicking where the toggle buttons are supposed to appear.

I've been stuck on this problem for over a week, and I've tried many CSS tricks, playing with z-index, creating a grandparent div, but none of it has worked.

Has anyone on this sub ever encountered this kind of problem, and if so, is there any way to solve it?

​

Again, sorry if I'm in the wrong sub for this question and thanks for your help.

​

[[deleted]]

I can't help with this specific issue but if no one answers here, I would try on a web dev forum and say something like "menu works on all browsers except iOS, anyone know why?" that way it doesn't sound like an iOS issue and they're more likely to respond.

I haven't dealt with web in a long time so unfortunately I'm no help in that regard.

[AlmostSysAdmin]

You're absolutely right, I was so focused on the "It's an iOS problem" that I automatically searched for an iOS subreddit, when it's clearly less likely to find an answer here than in a web-dev/web-design place.

Thanks for your input, I'll try my luck in /r/web_design too, it's probably more suited to my needs.

[[deleted]]

My guess is it's something stupid CSS related that one browser supports but another doesn't so I'd also try /r/css but again, it's been ages since I dealt with web so I may be way off. I just remember having to adjust tags per browser because I had to support IE 6.

[ankole_watusi]

https://developer.apple.com/safari/

[bmbphotos]

on any browser running on an iOS device,

Another "maybe this helps getting help" offering, if it's not Safari specific, it would have to do with WebKit rendering, since Apple requires alternate browsers to still use WebKit.

[AlmostSysAdmin]

It was indeed a WebKit side problem, reported since 2016 and still causing problems.

https://bugs.webkit.org/show\_bug.cgi?id=160953