iPhone - Data URI's (css background images) only work when connected to WIFI

Question

I've created a mobile web application for use by Android and iPhone devices, after testing I was happy that everything worked perfectly and so decided to try optimising it a little.

I decided I would use data uri's in my css file as all the images are small 16x16px png images.

While testing with my iPhone connected to the Internet via WiFi the images load fine, however when connecting using the mobile data connection images do not load.

Looking through the Apache error log I see that for some reason the image is being requested as a file (and is not being found), although using WiFi there are no errors...

File does not exist: /www/min/data:image, referer: http://mysite.com/login/

The CSS I am using is as follows...

    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA5CAYAAAD3PEFJAAAAUUlEQVQYV4XMyw1AABQF0ePpQCNK0Ke+lCEkFmLjWRHx3dzcZCaDItV1m5GZgn0y1+M9AWfl4r2Cv/Jd+fDWN/AXgCyrqukCY6APDIEpMAeWDc7zXPFRLR43AAAAAElFTkSuQmCC");

I've tried everything I can thing of, not using css shorthand/using css shorthand, different mime types, not using Google Minify, but all to no avail. But this still does not explain why it all works perfectly over WiFi.

The Android device also works perfectly as do Firefox, Chrome and the desktop version of Safari. Also when loading the actual PNG image files (as opposed to embedding images using data URIs) the images load fine.

If anybody can shed some light on this I will be eternally grateful, most things I can work out but this has me completely stumped!

Answer 1

This is not really a solution, more of a work around...

It seems after much messing around that the only way I can find to get this to work (usin go2) is to use inline styles for css containing the data uri's.

However, my intention was to embed the images into the external stylesheet so it (and the embedded images) would become cached, embedding images into the html document itself means I cannot cache the images so they must be loaded with every request.

As always, if there is a better way I would love to hear about it.

Answer 2

I am wondering if the carrier is blocking data URI schemes or plain does not support it. I would try to tether the laptop with a mobile connection and see if data URIs work. Hmm, but then you would not have seen the request fail on your web server logs. I also recommend seeing the request coming in to the server using wireshark and see if there is a difference in requests between the one from mobile connection vs. wifi (specifically the headers being sent in the two requests)