9

Ever since iOS8, the sites I managed are experiencing an intermittent problem in which images are swapping locations with other images. This has been mentioned in a number of places, but with no apparent solution:

https://discussions.apple.com/thread/6574663

http://tech.vg.no/2011/12/14/safari-on-ios-5-randomly-switches-images/

http://tech.vg.no/2012/02/01/safari-on-ios-5-randomly-switches-images-part-3/

it appers it was a problem in iOS5 in the past. Our server is running Lightspeed with pipe-lining and keep-alive. My server admin has confirmed that pipe-lining is returning assets in the order they were requested. He's mentioned disabling keep-alive may resolve the issue, but would massively increase server load, which would be a really bad thing.

All my assets are passing content-length correctly too.

I'm really at a dead-end now for a solution to this. With so many of my users using iOS, its beginning to be extremely frustration for everyone.

It only started occurring with the introduction of iOS8 which has some pretty heavy changes to Safari. In every release, of 8, the problem is still there. As I said, it's intermittent and our users are starting to blame us as 'no other site has the problem'.

I was wonder if anyone could shed some light on this? Has anyone else experienced this problem and/or found a solution?

Here is a link to my site in question.

Glorfindel
  • 1,213
  • 3
  • 15
  • 22
David
  • 829
  • 3
  • 13
  • 30
  • Welcome to ServerFault David, can you narrow this problem down to perhaps the html of the website? Or is this specifically a Safari issue? I don't have an iPhone to test, but perhaps you can indicate what images are trading places, so someone here who isn't savvy enough to own a Droid(joke) can reproduce the issue? Also, try installing a different browser on the phone and see if it's a Safari issue or iOS issue. – MDMoore313 Apr 10 '15 at 14:34
  • 2
    @BigHomie It's specific to Safari on iOS8. It doesn't seem to occur on Google Chrome. And the problem doesn't appear to occur on any other platform. – David Apr 13 '15 at 08:40
  • Hi ! I have many questions to help you focus on the real problem. Does the problem occur on Safari OS X ? Does the problem occur in Safari iOS in a Simulator ? Did you try to open a Safari inspector [link](http://appletoolbox.com/2012/10/how-to-use-web-inspector-on-ipad-iphone-to-remote-debugging-with-safari/) to check if links to images are correct or if it's a cache problem of Safari ? These questions should lead us to the root of the problem. – Eric Ly Apr 15 '15 at 10:18
  • @DeadEye I'm pretty sure the problem only occurs in iOS 8. I'm unsure if it happens in a simulator and web inspector doesn't show anything unusual. In fact, the images come back with the correct filename despite the wrong image. My biggest problem is that the radar report to apple was closed without reason and openradar hasn't got anything activity on it either despite all the information on the discussion forums. – David Apr 15 '15 at 14:16
  • If you try to go directly to the image path of a swapped image through Safari iOS, is it the correct image ? – Eric Ly Apr 15 '15 at 14:22
  • @DeadEye yep. Totally fine. clearing cache sometimes fixes the problem. but it does eventually come back. – David Jun 22 '15 at 10:35
  • We are seeing the problem on a page with lots of small-ish images. It seems specific to Mobile Safari, doesn't happen on desktop Safari. Happening on iOS 9.0.2 still. – Dan Fitch Oct 07 '15 at 14:33
  • Still happening for some of our users. OpenRadar bug: http://openradar.appspot.com/19027882 – Dan Fitch Apr 12 '16 at 17:37

4 Answers4

2

We had this problem as well and the solution for us was to remove all tags in our HTML and use css classes with background property instead. Here's an example:

.img_logo {
  background: url(../images/logo.png?v=20150427) no-repeat;
  width: 175px;
  height: 49px;
  display: block;
}

Feels kind of awkward, I know, but this was the only way that solved the problem for us. One drawback is that we had to remove the "alt" for the images but I guess you can solve that with some javascript if necessary.

Hope this helps!

HBruijn
  • 72,524
  • 21
  • 127
  • 192
Mikael Lundberg
  • 21
  • 2
2

I was dealing with this issue on a new website we just launched. Everything looked good in FF/Opera/Chrome, etc. but I had MAJOR image swapping issues in iOS8+. I noticed that a lot of the sites reporting this problem run Litespeed webserver. I switched to Apache for a moment to test, and sure enough, the website loaded just fine. My host (wiredtree.com, excellent service) and I looked at some of the configuration options in Litespeed, and disabled these two options:

  • Enable Compression
  • Enable Dynamic Compression

After disabling those two, the websites loaded up just fine with no issues. It took a very slight performance hit, but definitely worth it.

At first, we tried to disable keep-alive to effectively disable HTTP Pipelining, but it didn’t solve the problem. The above is the only thing I’ve seen that offered a real solution.

Hopefully this can help someone dealing with the same issues!

Andrew Schulman
  • 8,561
  • 21
  • 31
  • 47
Kevin
  • 21
  • 1
1

Not an answer, but an approach to solving the problem:

  1. Reproduce the problem on your own using a development version of the app using the in-production web servers. Just making sure you cover that.
  2. Create a new hostname / CNAME entry and corresponding virtual host on the webserver, or if necessary for step 3, a separate HTTP server on a separate port. This is known as the "test HTTP server"
  3. Point your test / development version to this new HTTP server and reproduce the problem. Don't go to step 4 until you can do this!
  4. Now on this test HTTP server, either through redirects or intelligent configuration (as possible with Apache), disable keepalives, compression, https, caching, pipelining and anything else you can think of. Reproduce the problem and take note of all configuration tuples that do this and those that do not.
  5. Swap Litespeed server with Apahce. Again, should be pretty trivial for a good sysadmin. (ahem). Reproduce problem.

If you can reproduce the problem all the way through step 5, and no set of configuration changes or server software changes make the difference, the problem is iOS and probably nothing you can do. (But this is unlikely.)

If however, there is a set of configuration changes that is not dependent on Litespeed (ie, occurs also with Apache), then we can do a work-around: Use the BrowserMatch directives to detect the particular (set of) browsers; set the configuration parameters for this set BrowserMatch set. You'll find examples of this kind of thing going as far back as IE 3.0 and Netscape browsers.

If the problem turns out to be Litespeed, use the above approach and file a bug with Litespeed support. You are paying for support, aren't you?

Otheus
  • 432
  • 3
  • 12
1

using http/2 protocol appears to have resolved the issue in my case. But, im sure there might be an actual fix/solution to this problem.

David
  • 829
  • 3
  • 13
  • 30