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

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

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

Solution 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?

Solution 4:

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.