none
Ajax v7 and Safari 5 Display Problems RRS feed

  • Question

  • We've just launched our new Route planner app built using v7 of the Ajax API. (http://www.rac.co.uk/route-planner) The biggest issue we have currently is some strange display issues in Safari 5, version 4 and earlier appear to be unaffected and all other browsers we have tested are ok.

    Some elements of the page 'disappear' at the point the map loads into the page, including the primary site nav at the top of the page. The common factor appears to be elements that are positioned using css and have a z-index.

    Whilst trying to narrow the problem down we have tried removing all js apart from the basic example of inserting a Bing map into the page and so it doesn't seem to be our javascript but more to be a problem with certain combinations of css and the Bing Maps js.

    Has anyone else come across a similar problem or any ideas on how we might solve this? Obviously we would like to get this sorted as soon as possible!

    • Moved by Ricky_Brundritt Friday, March 9, 2012 5:43 PM (From:Bing Maps: Map Control and Web services Development)
    Wednesday, April 13, 2011 1:32 PM

Answers

  • my bad, Image was hosted on private folder, I made it public you should see now.

    Safari on windows is not supported. we have couple of known bugs including no checkboxes inside map mode drop down, so it could be related. Try on Safari+mac, if you could repro. For details on supported browsers, pls visit http://msdn.microsoft.com/en-us/library/gg427618.aspx


    HemantGoyal
    • Proposed as answer by Hemant Goyal Wednesday, June 8, 2011 5:11 AM
    • Marked as answer by Ricky_Brundritt Friday, June 10, 2011 12:27 PM
    Friday, May 27, 2011 9:53 PM

All replies

  • We're using Bing Map Ajax Control v7 and having the exactly same issue, the styles for all input elements are missing on our web pages if map is displayed. No solution so far.

    We tried the interactive SDK website from Microsoft on Safari 5, same issue: http://www.bingmapsportal.com/ISDK/AjaxV7, the style for button "Reset", "Run", "View HTML" is correct if map is displayed.

    Thursday, May 26, 2011 2:38 AM
  • @Matt - This is specific to Safari 5 & is due map css transform affecting the main page css. could you try adding below li element as a workaround! 

    <div id="headerMenu" class="clearFix plannerSelected">

           <ul id="headerNav">

               <li style="-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></li>

        <li class="breakdown topLevel" id="breakdownMenu">

     


    HemantGoyal
    Thursday, May 26, 2011 3:46 AM
  • We have tried the workaround and it does solve the problem. As we had a few elements on the page showing the issue we added the following style to our stylesheet:

    element:before { content: '<div></div>'; position:absolute; top:-9999px; left: -9999px; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }

    Where element is the appropriate selector for the container of the html showing the issue on the page (e.g. #headerNav)

    Thanks for the workaround!

    Thursday, May 26, 2011 9:35 AM
  • This workaround doesn't help for the issue we have, it could be different cause.
    Friday, May 27, 2011 3:01 AM
  • I've narrowed down the issue to just a few lines of html content. On safari 5, you click the button, the checkbox is disappeared after map is loaded. Any suggestion is appreciated!

    ----------------------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>Test</title>
        <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    </head>
    <body>
        <div id="map" style="position:relative;width:200px;height:150px"></div>
        <div style="top:200px;width:30px;position:absolute;"><input type="checkbox" /></div>
        <input type="button" value="Show" onclick="new Microsoft.Maps.Map(document.getElementById('map'))" />
    </body>
    </html>

    Friday, May 27, 2011 3:08 PM
  • No Repro on safari

    No repro for me? which version of safari are you using? Could you upgrade to above & see if it repro's for you.


    HemantGoyal
    Friday, May 27, 2011 6:07 PM
  • 5.0.5 (7533.21.1), it should be latest one for Windows version. Thanks.
    By the way, the image is unavailable from your post.

    Friday, May 27, 2011 6:13 PM
  • my bad, Image was hosted on private folder, I made it public you should see now.

    Safari on windows is not supported. we have couple of known bugs including no checkboxes inside map mode drop down, so it could be related. Try on Safari+mac, if you could repro. For details on supported browsers, pls visit http://msdn.microsoft.com/en-us/library/gg427618.aspx


    HemantGoyal
    • Proposed as answer by Hemant Goyal Wednesday, June 8, 2011 5:11 AM
    • Marked as answer by Ricky_Brundritt Friday, June 10, 2011 12:27 PM
    Friday, May 27, 2011 9:53 PM
  • Thanks HemantGoyal.
    Saturday, May 28, 2011 2:51 AM