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
Related
I have a React Native app that pulls image urls from Amazon. I store the urls in a database, and reference them later as the source of my images.
After building up a good amount of entries in the database from several users, and releasing my app on Android, I decided to set my focus on iPhone. I'm now noticing that some images are not showing. So I go in and make sure that the urls are correct, and they are. Plus they're still working on the Android app just fine.
I then open Safari on my mac and plug the url into my browser. Same thing, it doesn't show up (Must be an Apple thing). An image such as this one...
https://images-na.ssl-images-amazon.com/images/I/41OAg8ggg8L._AC_SY400_FMwebp_.jpg
Will not show up... but an image such as this... with a similar url will...
https://images-na.ssl-images-amazon.com/images/I/51sEOLVrs5L._AC_SY400_ML2_.jpg
I'm essentially getting a view like this on my app...
I just know this has something to do with my lack of understanding on how images now work in iOS, I've found that much through Google. I just don't know what. Can someone please explain? Thanks in advance!
Seems a few people had the issues too, but didn't figure a solution yet. For example I am having exactly the same this one.
Also according to this a reliable way to test if the universal link set up properly or not is to test the link in the notes app, which works for me. (Also works if I send the message with the link to myself.) However I can't open the app directly in most chat apps (eg. slack, discord) nor safari. On the other hand they works with the preview page on.
Anyone had a fix / workaround? Or that's just how it is (saw this might be issues with app trying to open the link in there build in browser and prevent redirecting somehow ?)
Any help or suggestion will be highly appreciated. Thank you in advance.
I had the same issue, enabling both universal links and custom url schemes for my dynamic link solved the issue.
Dynamic Links -> Edit Link -> Define link behavior for iOS
This is the setup:
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.
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!
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/).