The images in question are JPEGs and I've gotten them down to a smaller size (30kb). The wordpress site in question is responsive and this issue on happens when I'm using mobile network to load the site. Wirelessly, it has no issues but on 3G/4G, images loaded randomly, some are corrupted, images swap places, so all css and js seems messed up. I'm using W3 cache to enhance the speed, but nothing is helping. Some images are half grey, black and look corrupted sometimes. This only happens on iOS devices with safari browser.
Anyone else faced the same issue? On desktop being wired, wireless, I've never had this issue.
Not sure if it has to do with with database or overall site performance of the server. Any help is greatly appreciated.
While supporting our WordPress Clients, I've faced such an issue dozens of times There are two general reasons for such a behavior:
You're using some CDN (Content Delivery Network) which you didn't mention in your question, and different CDN servers output different website cache version. If you're using CDN, try to purge your local plugin's cache, disable your local plugin and purge your CDN cache.
Sometimes images thumbnails may be corrupted, while they still exist. Try installing "Force Regenerate Thumbnails" plugin and regenerate all the thumbnails.
Though two above reasons are the most common, the issue itself may be connected with something else as well, for example, with some particular plugin. For this case it might be a good idea to temporarily deactivate your plugins one after another and see if the issue is resolved.
In case any of these won't help, it will require some debug work, so it could be a good idea to hire some WordPress developer for about an hour to fix this.
Good Luck!
If you have access to a mac + safari you can try remote debugging your iOS device. If you do this you could open the developer toolbar for the device so you can see if the information is actually being loaded. ie. if the messed up image is 300k on the desktop site, but the iOS device is loading a 30k image, you would know you're losing data somewhere.
I've not seen this specific issue, but I've had similar issues pop up due to bad CDN links, caching plugins, and lazy loading of images.
Another note to look for would be if your theme/template/plugins are using src sets. It could be possible that your normal version of the image is fine, but the images in the srcset for mobile are all messed up.
As noted above, completely disable w3 cache to troubleshoot that it's not the issue. Then take a look at the plugins.
Related
So based on my searches this has been a long-standing bug on iOS/Apple’s end. As of yet I haven’t been able to confirm a workaround so would like to see if I’m up to speed on this.
I incorporated a new favicon on my site with the help of realfavicongenerator, and it’s showing up everywhere except Safari iOS where a faulty cache seems to force the old image to show when the site is favorited or bookmarked. Adding to homescreen works fine, MacOS favoriting/bookmarking works fine, Safari iOS doesn’t.
I remember having a similar issue when incorporating the first apple-touch-icon a few years ago, also using realfavicongenerator: when favoriting/bookmarking in Safari iOS the icon was empty instead of showing the image. Eventually it showed up but I don’t recall how or exacty when, but it definitely took a lot longer than it should have.
I’ve obviously tried clearing cache and website data/history through Safari settings, restarting my phone, appending a variable to the apple-touch-icon URL, using both absolute and relative paths, and tinkering with different image size specifications, none of which worked.
I saw a suggestion somewhere that resetting the phone may work, but my question in that scenario is what exactly to reset and whether this would compromise other data.
Are there any workarounds/fixes I’m not aware of?
I’m using an iPhone 7 with iOS 12.2. The code being used is straight from what realfavicongenerator provides.
RealFaviconGenerator's author speaking.
As you noticed, iOS Safari is quite lazy regarding favicon reloading. It is not the only one.
The trick is to force it to reload the icon by providing a URL it never encountered before. A simple way of doing this is to suffix the existing icon URL with a dummy parameter. For example, change /the_icon.png to /the_icon.png?v=2.
To do so with RealFaviconGenerator, generate your icons again. This time, make sure to open the Version/Refresh tab in the Favicon Generator Options panel, and select the second option, as below:
Note: You might want to edit manually the code already created by RealFaviconGenerator and append the version yourself. This might be a bad idea. For example, if you put your icons in your root folder, some HTML lines were not generated (because of conventions RFG is taking advantage of). But suddenly, these lines must be added to specify a version. This is definitely not something you can guess at first sight.
New favicon showed up today, with no intervention on my part (versioning had also been removed). Not sure why. Guess it may be due to a time interval.
I am trying to setup offline support for our webapp. I would love to use a serviceWorker for that but unfortunately Safari does not support those, yet.
So I tried using the deprecated manifest file. But apparently only files from the same origin are allowed in there. We are loading our static files from a CDN (so the origin is not the same).
Is there any way to make a webapp with CDN files work offline on iOS?
One last idea would be to generate a index-offline.html file, include that one as a FALLBACK in the manifest. In there, I would point to the same files but this time not on the CDN but on our own server... But this does not seem like a nice solution to me.
Thanks in advance :-)
Jesse
As long as iOS does not support service workers, you cannot make offline work. Service worker is the core of a PWA and that can make offline work properly. We as still not sure if iOS will support offline capabilities.
i am faced with a huge problem. I have been developing a website since many days now. I have a style1.css which i use through dream weaver. today morning i was starting work on a new page and i by mistake linked an old style1.css from another website folder into my current HTML/JSP page(that i started work on today) and i continued everything. It got saved and the latest style1.css got replaced by the older one and got updated. This is screwed up eveything, and i dont have a backup because i never made such a blunder ever and the file that i linked was from an older backup. I didnt know. Now i have an old Reg.html(the proper one) page open in my Opera browser. What i want to do is copy the css and HTML from the browser itself from memory. Because if i view source and click on my linked CSS file, it shows the current(wrong one) and also the HTML source maybe wrong. I have replaced about 3-4 days of work, i cannot afford to rework, so if there any way i can extract html and css from an opened page from memory. (what i am saying is that if i refresh, my work is gone, so i havent refreshed it and carefully trying to extract out.) I tried recuva file recovery software locally, in my css folder, but it doesnt work. in windows previuos versions also there is nothing. In dreamweaver is there any backup mechanism from which i can restore it? I think my only option is to extract from opera. Is there any software or mechanism i can use to do that? or do i have to work again. The latter means that i have to do all the work again on multiple pages. Please help me! :(
I am attempting to use Imagemagick to manipulate images that are uploaded by a user. Right now I have a simple set of Imagemagick.convert[ ] commands server side that preform a variety of tasks on the uploaded image. My problem comes from Imagemagick needing the file data to be read into meteor and not from a url. What I end up doing is writing the uploaded file to the /public folder where Imagemagick is able to manipulate the image. However because the list of Imagemagick.convert commands (saving and writing to /public), the application keeps refreshing, breaking up the processes and sending it into an infinite refreshing cycle. I don't think assets is a viable solution, but I need some folder that I can write to in meteor that will not interrupt the various Imagemagick processes through a refresh. I have tried the .folder for a hidden folder, but meteor gives me an error: "You can’t use a name that begins with a dot “.”, because these names are reserved for the system. Please choose another name." Any thoughts?
#Nate I wrote a little example app that solves this problem by using a temporary directory (as others have suggested):
https://github.com/ideaq/image-uploads
My solution gives you:
Easy image uploading in any Meteor app
Images are re-sized to Thumbnail, Mobile Optimised and Full-size Original
Images are uploaded to AWS S3 for CDN delivery (scalability and speed)
A thumbnail of the image is displayed on to the user without refreshing the page
if you found a better way of doing image uploads in meteor, please share! thanks. :-)
I'm making a website where a user can say which items he wants to cache. Based on this, a manifest file is generated. By doing this the user can still browse in the website when he is offline. This is all working fine in google chrome. But on iPad it's not working as it should.
Sometimes things get cached sometimes not, not even the pages i visited.
We have been testing with 2 iPads all morning, but we haven't been able to get the same result on both iPads. Even if we do exactly the same, we sometimes get different results.
So what we do:
turn WiFi on
browse to the website
make some settings so some pages/images/... are added to the manifest file
turn WiFi off
go back to safari refresh/browse to pages that should be cached.
Sometimes on one iPad (this is an iPad 1) it works exactly as it should, but sometimes it doesn't work at all.
On the other iPad (this is an iPad 2) it never works completely as it should. Just some random results.
It also looks like the results are different when we completely shutdown safari, and then clear the cache and then do the whole process of downloading and caching stuff...
Somebody can help me with this problem? It's a real pain in the ass at the moment... :(
Open web server (IIS)
Select website
Open MIME type
Add or edit to text/cache-manifest
Reset iis at command prompt iisreset
It works for me.
I've encountered some problems as well with ipad caching.
MIME type of the manifest file is not set right due to windows hosting. The standard MIME type on a windows server is "application/x-ms-manifest". This was created when the ClickOnce applications came to life. The MIME type that is necessary to work on safari is: "text/cache-manifest"
Cache size is too small on ipad (you should get a warning to enlarge it)
the Ipad needs time! I've noticed that the cache is not filled when you see all assets or when the website is "loaded". Give it twice the normal time to load before you place the website to your homescreen.
Cache of the cache :) The iPad only reloads the files when the modified date on the server is changed. So when you really want to test, clear all cache on the iPad, remove the link on the homescreen and upload all your files again.
Conclusion: Time consuming!
Hint: Turn on the debug console in safari on your desktop or iPad. It gives a fair idea if you did something wrong or if it is a cache problem on the iPad.
It looks like the problem didn't have anything to do with the application cache. It was somehow a problem with the cookies/the way i was dynamically building the manifest file.
I'd like to slightly echo Pieter-Paulus Vertongen, I had a similar experience with Windows hosting.
According to the debugging console in Safari, the mime type for the manifest file was being misread and nothing was being downloaded as a result.
I copied all of my files, including the .htaccess file, over to a linux server without changing any content within the files...and then the caching worked beautifully.
So yes, it's possible this may be an issue of where the files are hosted. Use the debugging console and Jonathan Stark's code to find out:
http://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/