Home / server / Questions / 675761
Accepted
David
Asked: 2015-03-17 01:21:11 +0800 CST

How to fix Image Swapping Issue in iOS 8 with keep-alive + HTTP Pipe-lining?

  • 772

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.

web-server

4 Answers

  1. 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!

    • 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!

    • 2

  3. 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?

    • 1
  4. Best Answer

    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.

    • 1