I’m hosting a website on IIS, and after updating to iOS 8, some elements on the site now render poorly in Safari. In Internet Explorer, there’s the X-UA-Compatible header that lets you force rendering in an older compatibility mode (like IE9).
Is there a way to set a similar Safari compatibility view for iOS Safari via HTTP headers? Ideally, I’d like to force Safari to render the site like it did in iOS 7, at least until we can properly debug and fix the layout issues.
I faced something similar when iOS 8 came out, our layout broke in Safari, and I immediately looked for an equivalent to IE’s X-UA-Compatible. Unfortunately, Safari doesn’t support any header-based compatibility mode.
There’s no way to tell Safari “pretend you’re an older version” like you can with IE. What helped me was using feature detection (via Modernizr) and applying conditional CSS or polyfills based on actual browser capabilities rather than version numbers.
I went down this rabbit hole a while ago while trying to debug layout bugs that only appeared in iOS Safari.
I found out that unlike Internet Explorer, Safari doesn’t have any header or meta tag that lets you force it into a compatibility mode.
What I ended up doing was creating targeted CSS overrides using @supports queries and checking for specific iOS quirks using JavaScript + userAgent parsing. It wasn’t elegant, but it gave me a temporary workaround until the layout was fixed properly.