iOS 8 Mobile Safari Images Loading Corrupt - ios

Having a very difficult time tracking down a solution to this bug, hoping someone can help me.
My web app http://www.customozer.com loads fine on desktop, but on mobile safari, some images load corrupt (screenshots below in comments).
This issue does not appear when I use chrome on my ipad (iOS 8.1.2), just safari and saved web apps.
What's also interesting is that when loaded directly from my local MAMP stack using an ngrok tunnel (http://alexgoodwinmedia.ngrok.com/Oz-Snowboards/site/app.php), the issue does not appear. Files on my local machine and on the customozer.com server are synced.
From what I've read, there's a mobile safari issue with loading large amounts of AJAX data.. but that's not how these images are being loaded.
Does anyone have some insight into how can this issue be resolved? Happy to provide more details/tests.
Thanks!

After rather extensive testing, I've finally concluded that the PNG images were being corrupt by an old version of PNGlib (a GDlib element). By moving my project to a new server that allowed for a newer version of GDlib to be installed, I was able to fix the problem.

Related

Large image on S3 not showing on iOS

I don't know why but my image on S3 doesn't show on all iPhone devices.
I tried installing permissions, configuring CORS on S3... but it still doesn't work!
Small image showing perfectly
But large image not showing (I tried both on Chrome and Safari)
Thanks for any support.
There is something wrong with the 2nd image file.
While, yes, it does appear correctly in my web browser, I downloaded it to my computer. The downloaded file could not be opened by several of my graphics programs.
On my Mac, it worked in Chrome and Firefox, but not Safari.
So, it's not a problem with iOS. It's a problem with the image file.

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.

iOS 8.1.2 issue opening file -- Fixed

Problem
Greetings Stack Overflow community.
I have an issue with the iOS.
Currently, I am working in a web application with a mobile skin full responsive.
In the PC version everything works fine, same happening with android. Everything run's without any problem. But with the iOS I have some issues.
First, I had a bug with the file upload. I couldn't upload any file. I searched everywhere and then i find out that the version i was currently using had some serious problems with the file upload (iOS 8.0).
So I updated and now I have the 8.1.2 version. File upload its just working fine but now I can't see the pictures that I upload. The app returns me this:
Open file;
Open file with...;
I click in the options but nothing happens...
Could you please help me?
In advance thank you!
PS: It's an app with PHP/HTML/CSS. The normal web app style with a mobile skin.
Solution
I found out the solution and I forgot to post.
The safari mobile browser and chrome mobile browser doesn't read pdf files however the desktop browser reads. So, I've made a new File Reader PHP Class and everything is now fixed. If anyone needs help please let me know, I'll have all pleasure to help.
Thanks anyway :)

Cache manifest on ipad

I have a ipad. I make a website with html5 application storage. With a manifest file. The manifest is working on the new ipad 2 and all the web browsers. But it is not working on the ipad 2 with a lower ios version.
The problem is. When i loaded the page. The manifest file is caching the website. I turn airplane mode on. Now i can used the website without a internet connection.
But the problem is. When i now reloading the page. I get a error, that i need a internet connection to view the page. How can i fix this. This problem is in safari.
I have been working through similar issue.
I have an iPad 1 so not exactly the same platform, and I know this sounds a bit "did you turn it off and on again" but you need to make completely sure there are absolutely NO errors in your cache manifest. If you are using a file in your app that is not listed in the cache manifest file, your app will try and function without the missing file. This is particularly relevant when using multiple js files. Anything missing (an easy thing to do when you are in rapid development) will crash your app offline.

iOS: Did Apple disable HTML5 offline capability for web apps saved to the home screen?

I've been doing lots of work in getting a few web apps to work offline on iOS using the HTML5 manifest. I've ran across the typical problems everyone else has and fixed them and everything seems to be working fine—except in the case where I save the web app to the desktop on my iPhone 4.
If I do this and then enable airplane mode, I get the following alert when trying to access the app via the home screen: "your-app-name could not be opened because its not connected to the internet." Accessing the app via Safari browser works fine while offline.
If anyone knows if this is an error on my part, or even the slim possibility of a work around, do tell.
Even downloading the new Financial Times web app (very well done with extensive localStorage support) results in an error when accessing it offline from the home screen.
Technical specs: Running iPhone 4 with iOS 4.3.3 (but also saw the issue in 4.3.2)
After reading the comments (especially Rowan's) I ran more tests and found the answer:
No, Apple did not disable HTML5 offline capability for web apps saved to the home screen, it works - for the most part. There is a bug that will make it not work. It doesn't seem to have anything to do with your manifest setup (unless perhaps it downloaded a bad manifest or incomplete manifest at one point.) We don't know how widespread it is but the fix is to clear your Mobile Safari Cache.
Here's the steps:
Close the web app (make sure its not sticking around in the background).
Cleared Mobile Safari cache: Settings > Safari > Clear Cache
Reopened the app (for caching).
Close the web app again (make sure its not sticking around in the background).
Enabled "Airplane Mode": Settings > Airplane Mode
Reopened the app.
It should now work offline. If it doesn't then its probably a separate manifest issue in your app. Looks like a weird bug with the browser cache - or perhaps the cache was completely full? Who knows, but that's the answer. Thanks guys.
iOS seems to be very sensitive to load issues when offline.
I was getting your "could not be opened" error when offline on a page I was working on. The problem turned out to be that the page created an iframe pointing to a site that didn't have an AppCache. Removing those iframes fixed the issue.
In my case, I handled it using window.navigator.standalone which tells you whether you're running in an iOS homescreen app. The code looked like this:
if (!navigator.standalone) insertFrames();
add this to your html:
https://web.archive.org/web/20170201180939/https://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/
I found it massively useful - even though I've created my manifest file and compared it to other people's manifests this JavaScript debugging script gave me the clue I would have never found otherwise. I apparently had syntax error in my manifest ... long story short I had to remove everything and add the paths to each file/image one by one. The end result was the same however it worked... how weird!!! does whitespace / comments affect the syntax of the file?

Resources