Safari in iOS8 image placement

I too have found this problem, really only on one site that my partner and I are building. I haven't noticed it on others, but it is a real problem. This is the first thread that I found that addresses the problem. I'm glad I found it because I thought it was just me.

What is everyone writing in the bug report they are sending to apple? Images are being randomly replaced or not appearing at all?

I downloaded Chrome for my iPhone 6 to test it and of course Chrome works perfectly. Now if I can just get everyone who will see my client's site on their iPhone to download Chrome....

I have updated both my iPhone and my iPad to 8.1.2. I am still having this issue on both, mostly when I have visited the site on WiFi then I visit the same site on LTE. It mostly happens on sites that I frequent very often so it must have something to do with caching.

I reported this to Apple. I have mostly seen the issue where images are completely swapped and load in the incorrect location. But I have seen where the images don't load and a blank white box loads instead. I have also seen when an image half loads and the portion of the image that doesn't load is black.

Chrome on the iPad and iPhone loads everything perfectly so this is definitely an iOS issue.

Potential Workaround Found!

Background:

So I had a website I was working on that was experiencing this problem pretty badly. I found that some phones were more likely to exhibit the behavior than others. I used the phones that were the worst offenders, and performed the following steps to be able to somewhat reliably reproduce the issue. Even on the worst phones, while following these steps, I was only able to get 50% reliability on reproducing the issue, so with all code tests, I'd recommend repeating the steps several times to determine if a change had been made.

Steps to reproduce:

1. Open page that is exhibiting the issue in Safari Mobile on iOS8
2. Close Safari
3. Reopen Safari (should by default bring you back to the page)
4. Check this page very carefully for misplaced.
5. Close Safari, and repeat steps 3-5.
6. On the worst phones, this would happen 50% of the time, so I would have to repeat the entire process several times to confirm / deny whether or not what I did was helping the issue.

Cause:

I'm not sure if it's the same cause for all of you, but in my case, it resulted from a specific set of response headers associated with a CSS file. When present, the problem would appears 50% of the time, once removed, the problem has not returned. The way I determined this, was removing all scripts / style assets from the page and found that the the issue disappeared. I then slowly started reintroducing assets until the problem returned, and looked very closely at the files.

I was able to get even an empty .css file, to cause the image swapping bug, if the response headers were as follows:

Bad:

Cache-Control:no-cache

Connection:close

Content-Encoding:gzip

Content-Type:text/css;charset=UTF-8

Date:Sat, 10 Jan 2015 13:08:36 GMT

Server:Apache/2.2.15 (Red Hat)

Vary:Accept-Encoding

X-Powered-By:PHP/5.4.28

Fix:

I removed the special handling associated with the file, and got these were the default headers that were sent with the file, and it worked:

Good:

Connection:Keep-Alive

Content-Encoding:gzip

Content-Length:234

Content-Type:text/html; charset=UTF-8

Date:Sat, 10 Jan 2015 13:09:13 GMT

Keep-Alive:timeout=8, max=200

Server:Apache/2.2.15 (Red Hat)

Vary:Accept-Encoding

X-Powered-By:PHP/5.4.28

I believe the issue was related to either the no-cache, or the lack of content-length, but in either case, this triggered the bug within Safari to start swapping images.

Your mileage may vary, but hopefully the above will help, good luck!

Anyone had success with TimDix's workaround?

can you explain- I removed the special handling associated with the file?

Sorry, it be a simple question.

I don't know may headers all seem fine I'd i'm still getting the image swap often. This is driving me nuts.

Remote Address:12.34.56.78

Request URL:http://www.example.com/file.css

Request Method:GET

Status Code:200 OK

Accept-Ranges:bytes

Cache-Control:public, max-age=604800

Connection:Keep-Alive

Content-Encoding:gzip

Content-Length:3897

Content-Type:text/css

Date:Thu, 12 Mar 2015 20:53:04 GMT

Expires:Thu, 19 Mar 2015 20:53:04 GMT

Keep-Alive:timeout=5, max=100

Last-Modified:Thu, 19 Feb 2015 18:20:10 GMT

Server:LiteSpeed

Vary:Accept-Encoding

same problem so annoyed -_-;;

I actually expected to be fixed this on iOS8.2 but not

Please guys I need solution for this desperately as my client's device is having this problem and not accepting this. I am using Wordpress and do not know how to amend the headers if TimDix solution really works.

Please I need solution for this desperately as my client's device is having this problem and not accepting this. I am using Wordpress and do not know how to amend the headers if your solution really works.

Upgraded to 8.2 on iPad and still not fixed. Quite tedious. Apple should be ashamed.

Only workaround I've told my users is to "Preview" any Wordpress postings in the Wordpress app and for "non-authors" install Chrome for those sites that have a known issue - in both apps the images are in the correct location.

(If only we could change the default browser)

Hi,

Go to Settings>Safari>Block Cookies.

If you have it as "Always Block" that might be the issue.

"Allow from Websites I Visit" should do the job - "Always Allow" is a bit low on security, still an option.

Regards

Elfbreed

iOS 8.3 and I can confirm that the bug is still there. My cookies are set as default cookies are for safari, which is important as this will be the way most people will have their devices setup. I've also confirmed that my site's headers for images and other assets are correct. The only way to prevent the problem is to switch HTTP pipe-lining off completely on my web server, which isn't a solution.

We all need to get Apple's attention to this bug. I submitted a bug report in Radar and it was just closed, no reason or explanation. I also put it on OpenRadar and that's not really helped either.

Can anyone else suggest how we can bring this to attention? What if we all submitted a bug report with the same subject (ie: Image Swapping Issues in Safari IOS8)?

We have the same problem on all websites of our clients over month! There are any complains by our clients and for them it's not acceptable saying it's a bug by iOS. We need a solution for this problem asap.

I also think that we need to get Apple's attention to this bug. The idea with the bug report is great and we will join.

It's probably worth reading this to help get the problem noticed:

https://blackpixel.com/writing/2012/02/radar-or-gtfo.html

And here is my OpenRadar:

http://openradar.appspot.com/19027882

Hi there,

I've had this problem since iOS 8, and this is a nightmare.

I may have found a solution. At least, it works really well for me.

Go to Settings > Safari > Advanced

… and deactivate the web inspector.

That works perfectly for me…

Enjoy! 🙂