Iphone 3g browser rendering problems. Wifi is fine

Question

I'm building a site which seems to work fine on all web browsers except the iPhone on a 3G network.

For some reason it is not being displayed correctly as if the CSS is not being parsed. As part of my investigation, I've tried the same browser (iPhone Safari) in a wifi connection and the page renders fine.

The page is written in classic ASP, what is interesting is that if I copy the rendered source from a PC browser and give it an extension of .htm, when you view this on the iPhone on 3G it renders fine. Same code, so is this something odd with classic ASP and 3G or possibly the mobile companies 3G network doing something to block specific content?

I have also tried this on a Nokia 3G Vodaphone network and it's fine.

So, I believe this confirms that the iPhone browser is not at fault, 3G networks are not at fault, the code is not at fault, so I can't seem to understand where the problem lies other than it being a problem with the specific 3G provider.

Perhaps someone has seen this before and has a suggestion/explanation that will help fix this issue?

Answer 1

Your 3g Network Provider may insert a Proxy to serve webpages, e.g. for downsizing images. Also it might inject some JavaScript into the page. Such things could be the source of your issues. Some iPhone browsers let you view the source of a webpage, e.g. iCab mobile, so you could doublecheck what is delivered to the browser from your network provider.

Just a guess...

Answer 2

After some investigation, it seems the solution to the probelm was not to use import when using external CSS files references, 3g doesn't like it for some service providers.

Answer 3

I ran into this a while back, it was caused by css and javascript compression done by O2, I found the solution was to add a HTTP Header "Cache-Control: no-transform" response directive to these files.

See: http://stuartroebuck.blogspot.co.uk/2010/08/official-way-to-bypassing-data.html

See also Web site exhibits JavaScript error on iPad / iPhone under 3G but not under WiFi

For anyone needing a solution to this in ASP.NET, this sets the Cache-Control header as per for javascript files using URL Rewrite Module 2.0 http://learn.iis.net/page.aspx/665/url-rewrite-module-20-configuration-reference.

<system.webServer>
        <rewrite>
            <outboundRules>
                <rule name="Compression header" preCondition="Match JS Files">
                    <match serverVariable="RESPONSE_Cache-Control" pattern="(.*)" />
                    <action type="Rewrite" value="no-transform" />
                </rule>
                <preConditions>
                    <preCondition name="Match JS Files">
                        <add input="{RESPONSE_CONTENT_TYPE}" pattern="(javascript)$" />
                    </preCondition>
                </preConditions>
            </outboundRules>
        </rewrite>