Strange view with iOS 8 devices

Question

Hi there,
with our iOS 8 devices the SharePoint 2010 delivers a stange view. The content stays the same, but the horizontal and vertical navigation look strange. Some items in the horizontal navigation cannot be clicked.
Look at this screenshot. On the top you can see the broken view with iOS 8 devices. Below is the normal view. How can I achieve the normal view for all devices? I tried disabling all mobile views, but iOS 8 devices still get this strange view.

Answer 1

I know that this thread already has an "answer" posted, but we have this issue on our public facing website, so it was difficult to be able to tell people they need run in desktop mode and so the hunt continued. In this stackoverflow thread, they
talk about what the actual problem is (long story short is this new version of iOS 8 has safari version of 600, which is being captured and misinterpreted in the mozilla.browser file as version 60 instead of 600 - full description here http://stackoverflow.com/questions/25978746/ios-8-safari-8-not-working-with-asp-net-ajax-extensions).
So what this means is you have to either make the correct fix in the mozilla.browser file (which isn't recommended by Microsoft) or you go in and extend the Safari60 id (which is the one that grabs the iOS 8 browser) in the compat.browser file. When taking
this approach, since you don't seem to be able to have multiple parentIds in a browser element, is you will need to inherit the Safari60 element the way that it describes in the stackoverflow article by doing something like this:
    <browser id="Safari6xx_bugfix" parentID="Safari60">
        <identification>
          <capability name="appleWebTechnologyVersion" match="6\d\d" />
        </identification>
        <capture>
        </capture>
        <capabilities>
          <capability name="ecmascriptversion"       value="1.4" />
          <capability name="w3cdomversion"           value="1.0" />
          <capability name="supportsCallback"        value="true" />
        </capabilities>
    </browser>
you then also need to find all the ids in this file that match Safari2, AppleSafari, iPhoneSafari, iPodSafari and duplicate all those entries so that you can inherit from the Safari6xx_bugfix element we created here.
An example of what we did to solve this is included below (yes, we did not want the iPod or iPhone to be recognized as mobile devices, so that element was changed from the original value of true, but other than that, these elements are exact duplicates of
the originals - where the original just has an id minus the "_6xx_bugfix")
    <browser id="Safari2_6xx_bugfix" parentID="Safari6xx_bugfix">
        <controlAdapters>
            <adapter controlType="System.Web.UI.WebControls.Menu"
                     adapterType="" />
        </controlAdapters>
    </browser>
    <browser id="AppleSafari_6xx_bugfix" parentID="Safari2_6xx_bugfix">
        <identification>
            <userAgent match="Mac OS" />
        </identification>
    </browser>
    <browser id="iPhoneSafari_6xx_bugfix" parentID="AppleSafari_6xx_bugfix">
        <identification>
            <userAgent match="iPhone" />
            <userAgent match="Mobile" /> 
        </identification>
        <capabilities>
            <capability name="isMobileDevice"                    value="false" />
            <capability name="canInitiateVoiceCall"              value="true" />
            <capability name="optimumPageWeight"                 value="1500" />
            <capability name="requiresViewportMetaTag"           value="true" />
            <capability name="supportsTouchScreen"               value="true" />
            <capability name="telephoneNumberDetectionDisabled"  value="true" />
        </capabilities>
    </browser>
    <browser id="iPodSafari_6xx_bugfix" parentID="AppleSafari_6xx_bugfix">
        <identification>
            <userAgent match="iPod" />
            <userAgent match="Mobile" /> 
        </identification>
        <capabilities>
            <capability name="isMobileDevice"                    value="false" />
            <capability name="canInitiateVoiceCall"              value="true" />
            <capability name="optimumPageWeight"                 value="1500" />
            <capability name="requiresViewportMetaTag"           value="true" />
            <capability name="supportsTouchScreen"               value="true" />
        </capabilities>
    </browser>
Hope this helps anyone else who is having this problem and hopefully in the future it won't be needed because MS will fix the original mozilla.browser file to not mistake a version of 600 as 60.
Stokes