Clients accessing my app from their iPads are reporting issues with my application. The issue seems to be GUI problems, i.e. the NavBar in the bottom scrolls up when it shouldn’t (I am using bootstrap CSS and according to them, iOS is supported).
These do not appear to be issues on any other devices, including other non-iOS tablets.
However, from my understanding, iOS simulation such as through Cordova is impossible to do on a windows machine. Even if I ‘simulate’ a iPad view through developer console, the issues do not present themselves, so it only happens on the actual iOS device.
Is there any way to better troubleshoot this? Does anyone know of any known bugs/fixes involving iOS development and bootstrap? If it’s a safari issue, is there a way to test-run with safari on windows? (Bootstrap says windows safari is not supported).
I would strongly prefer not to buy an iOS device just for this.
I feel your pain. It’s an iOS Safari thing. I’ve had to deal with it before, but it was a long time ago. Pretty sure Bootstrap might have a solution of sorts for this. You might have to hand code it or change your HTML structure up a bit to solve this. Here are some links to look at:
Position sticky is a bit tricky to get to work right, but it’s possible. But ultimately you’ll have to test it on a real device. If you don’t have one at your disposal, you can always try something like Browserstack.com
Thank you! I’m glad to know it wasn’t just my application being buggy.
From the looks of it, my best bet is to try position: sticky, but I hope it doesn’t mess up anything on the other OS’s/browsers.
As for testing, that site might be useful, but if it’s too costly then I may just end up doing something like pushing changes and then asking iPad clients if the issue is fixed
If you look in a dark corner of the internet you might be able to find ISO images for MacOS. Then you can install these as a Virtual Machine on Windows. Then in that VM you can install XCode, and use the iPhone Simulator to access your website on a staging server or maybe even on localhost.
I think in the iPhone Simulator you can also access the developer tools so you can inspect the page, see why the CSS isn’t working and try various fixes…
@groudonzora It shouldn’t mess up any other OSs/browsers. You could always look for a free Browserstack alternative. Either way, you have a way forward. Good luck with it!
So I tried position: sticky in my nav class navbar:
But that made it stick to right underneath the content above it.
I noticed there was a div class within it, however, with a class of navbar-collapse (I believe as required by bootstrap).
My new solution is this:
It didn’t seem to break anything on my (windows) chrome, so I’m gonna push these changes and then ask my iPad clients if that fixes it.