Strange behavior with hyperlink on iPad only - ios

My first post/question. Hope I don't stomp on any rules!
I have a site (mainly html5) with the same 9 "navigation" links on every page. They work exactly as expected in Safari, FF, Chrome on my desktop Mac. They also work correctly on my iPhone 5. However, while they all work, as far as taking the viewer from one page to another, on my iPad (2?), all but one have to be tapped/clicked on twice before they work. The exception is the "Forecast" page which works exactly like it should (single tap/click). I have checked all the pages with BBEdit's syntax checker and its "Compare..." function. I have also used the nu HTML validation service. None of these systems can explain why only one link works correctly on the iPad.
If you have an iPad, you can see what is happening better than I can explain it. http://www.mid-southweather.com/
Thanks for any help or insight. I've found nothing from interweb searches.

Clearing the iPad's Safari cache did not help, but I discovered, however, that the iPhone and iPad are sharing bookmarks or history! I'll clear things on the iPhone and try again.
No change, even after turning OFF Safari on both the iPad and iPhone iCloud list.
I suspect it is either the older iPad hardware or the CSS menu building 'code'. I found the same problem in an older site where I used the same CSS for a multi-level menu. The same two-tap requirement occurs at the lower/final link, but, again, only with my iPad. Oh well, thanks for testing/reading!

Related

iPad Safari Web Inspector crashing on page load

I have a video focused website made in wordpress. When we go to test the website on iPad we connect it to a mac laptop and open the safari developer tools to check if we have any errors and whatnot. Everything works on our homepage but when we go to any video post we have added, it crashes the developer tools window, and the browser on the iPad has a little drop down at the top saying "A problem occurred with this webpage so it was reloaded".
The page is fine on the iPad, there aren't any PHP errors in our logs, everything works fine functionally, so I can't figure out what is crashing it.
Any ideas? Any way I can troubleshoot this?
Thanks in advance :) And let me know if you need any more information!
I had this exact problem and solved it by updating both OSX Safari and the iPad to the latest versions. Now i can use the Web Inspector again.

AngularJS data-binding not working on iOS Safari Only for Heroku App

In my current MEAN stack project, everything functions fine on desktop Safari, Chrome, and mobile Chrome, but in mobile Safari for iOS, data-binding shows as text (e.g. {{data.total}} as opposed to $25). To make matters worse, when I open the app from iOS Safari served from localhost, it also works properly.
I've tried rolling back my Heroku app and the problem persists, even when I go back to a version from when I'm sure it looked good on an iPhone. I've checked it out on others' iPhones, and gotten the same negative result. I can't find this problem elsewhere on the internet, nor am I sure what I should be looking for as the problem seems to be with Heroku or iOS.
Here's the live page: http://minneapolish3-beta.herokuapp.com/reddress. This has me very much stumped, but I'm pretty green. If you find it not working on other platforms, I'd love to know about that as well.
(Naturally, I can't well spin up a CodePen example as the problem is only occurring in the wild.)
A friend introduced me to the Safari Web Inspector for mobile which allwed me to see warnings, alerts, etc.
It turns out that my Google Maps API call, via http://, was causing the page to break on mobile Safari. When I changed it to https:// everything worked! Thanks go to Bonus Kun whose answer to another question helped expedite my solution.

iOS7 specific bug (page does not load, works fine in iOS8)

I'm building a mobile-optimized website via Shopify. There is an iOS7 specific bug and I have no idea why
The private beta can be found at cobblerconciergevip.com
The user clicks through a couple pages and arrives at the Get Started page, where they will indicate the number of items they are ordering:
The page can be found at /pages/getting-started
This page works well on desktop and most mobile devices. Here's what it looks like on iOS8: https://www.dropbox.com/s/wa59cyz3i6plyf9/IMG_6241.JPG?dl=0
However, on iOS7, there is a bug and everything outside the logo does not load (regardless of browser): https://www.dropbox.com/s/kwtel5oktrhccqx/IMG_6242.JPG?dl=0
I have no idea what is causing this bug or how to fix it. There isn't a way, as far as I know, to create a special version of this page for iOS7 users.
Does anyone know what direction to head in or can provide guidance?
Thank you so much!
EDIT: I added a response with pictures in the comments

Safari iOS debug URLs not showing up, inspector shows "null"

I have been using iOS simulator debugging using Safari reliably, but today am on a different computer and noticed something strange. I launch the simulator as usual, enable the developer tools in Safari, and go to inspect. But here is what I see, instead of the URL that is being viewed in the simulator.
If I click on one of those long strings, I do not see the inspector for the URL that I am viewing in the iOS simulator. Instead, I see:
Anybody ever seen something like this, before?
I've been having the same issue, but just solved it by changing the privacy settings in Safari.
In Safari->Preferences->Privacy change Cookies and website data to Always allow.
Hope this helps someone!

Anyone experience caching issues with web apps ran in full-screen mode iOS/Mobile Safari?

I'm having a very strange issue with my web app (which is ran in full-screen mode from the home screen) and Mobile Safari. Usually, as I develop, I edit the files with the changes that I want to make and then I re-launch the app from the homescreen. As per iOS design, the web app will refresh and reload the site.
However, in some odd but frequent situations, when I launch the application I get a cached older version of the app. If I navigate to the app through Mobile Safari (not from home screen) then everything looks great.
I've added meta no cache tags all over the space and even attempted to thwart the cache by adding ?query strings to .css files, etc, but for some odd reason when a cached version decides it wants to display - it will display, no matter what. Clearing cache and data from the settings menu and then relaunching will only sometimes fix the problem.
Anyone else run into this issue? If so, how did you fix it? Is it a known iOS bug? I'm thinking about adding some onLoad code to check if the application is running in full screen mode and then explicitly force a refresh.
Please help - this is extremely annoying and frustrating!
Rich
In my own testing I also found that applications run from the "Home Screen" on iOS won't properly refresh their CSS and JS files. This appears to be an ongoing problem. The only solution that worked for me was to:
Change the device date forward by 2 days or so..
Reload the app from the Home Screen..
Reset the date.
I also tried deleting and recreating the icon from the home screen and clearing the cache in Safari.
"Happily" you are not the only one seeing this problem.
https://discussions.apple.com/thread/3385843?start=90&tstart=0
Incase anyone asks. There were no manifest files involved in my testing.
iPad 2 with IOS 5.1.1.
Enable Debug console from "Settings>Safari>advance" and see if you've any errors there.
Most probably you may have an 'Invalid MIME type", Manifest Parsing or Resource Fetch Failure Error.
Fix them (this link might help in fixing those http://www.fuckyeahtml5.com/2011/06/debugging-html5s-offline-web-apps/).

Resources