map loads wrong only in iOS and OSX, not Windows

I am working with Microsoft.Maps, developing in Visual Studio. After publishing, it works great in all my windows browsers, but looks like this in both iOS Safari/Chrome and OSX Safari:

https://i.sstatic.net/7jtWr.png

When scrolling, or zooming, the same left side of the screen shows the same, while the right side of the screen moves to another part of the world, completely unrelated to the directions I try to move in. Not to mention, the pin moves too!

As a note, I tested this on Friday and had 0 complications...something happened in the past 3 days and I have no idea if I can even fix it.

    <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script>
    <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/js/jquery-bing-maps/jquery.ui.bmap.js"></script>
    <script type="text/javascript">
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
                    {
                        credentials: "<redacted>",
                        mapTypeId: Microsoft.Maps.MapTypeId.road,
                        enableClickableLogo: false,
                        enableSearchLogo: false,
                        showCopyright: false,
                        showDashboard: false,
                        showMapTypeSelector: false,
                        showScalebar: false,
                        tileBuffer: 0,
                        zoom: 10
                    });

        window.onload = MapLoad;

    </script>


<body style="min-height:418px;">
    <div id="topofpage">
        <form id="Form2" runat="server">
        <!--#include virtual="header.html"-->
        </form>
        <div class="undersightslogo" style="max-width: 100%; overflow: hidden;">
            <div id="mapDiv" style="position: absolute; width: 100%; max-height: 100%; top: 42px;
                bottom: 0px; left:0px; min-height:372px;">
            </div>
            <div style="position: absolute;left: 7px; bottom:-54px;">
                <h6>
                    &copy; <companyname> <script type="text/javascript">document.write(new Date().getFullYear());</script>
                    </h6>
            </div>
        </div>
    </div>
</body>

Solution

i found the solution in another forum. the problem is, safari is a very picky browser. as such, adding

text-align:left

to my map solved the problem. this problem presented itself through no different code of my own, or so i thought. but who really knows?