I have a website that works fine in Firefox and IE but never finishes loading in Safari 4.0.4.
The live website loads a menu then loads a Google map. Using Safari, the Google map never loads.
I have a test website on the same server that uses the exact same code for loading a Google map and Safari can load the map (this is the one that won't load on my live web). This test website does not have the menu - only the Google map.
In both cases (live and test) the main web page calls a loadmap.js file.
I've been pulling everything apart to try to identify why Safari won't finish loading. Has anyone run across any problems/solutions with Safari that may help me find a resolution to this problem?
This is the site where I cannot see the Google map: http://appalachiantrail.rohland.org.
It's just a layout issue with your page in WebKit (the rendering engine in Safari and Google Chrome). The map is loading, but the background is only being rendered a few px tall. Try setting an explicit pixel height value on the div#map_canvas, instead of height:98%.
Related
We are using JS HERE maps (v3.1.16) on a single page .net core website.
The map loads fine in Chrome, IE11, Edge & Firefox on desktop, and loads fine in Chrome on Android devices. However it will not load on any iPhone or iPad browsers.
We can see our custom markers, but the map image is not being returned, we are just getting a blue box.
Tried browsing the examples on the HERE Maps documentation (https://developer.here.com/documentation/examples/maps-js) and this too does not load the map in Safari on iPhone. We have tried 2 iPhones and an iPad.
Is this a known issue? Is there something that we need to put in place to make it compatible?
I can provide code if required.
This turned out to be the Content-Security-Policy set up on our site. Managed to get hold of a mac and found the error
"refused to load blob:[blob url] because it appears in neither the child-src nor the default-src directive of the Content Security Policy"
Adding child-src blob: to the response headers seems to resolve the issue.
I'm testing this page - it's live but not really public yet. http://info.iste.org/student-standards-contest
It is auto jumping to the start of the map (the header covers it a bit) in Chrome but not firefox or Safari. Does anyone know of a reason for this? My initial search attempts are not showing up anything promising. Does Chrome treat maps differently? Or are there any particular scripts that Chrome treats differently? I got the code to place the map direct from Google Fusion Tables if that is helpful.
This is a difference in browser behavior, but it's not because of google maps. You can see this by taking these steps:
Open a new tab in chrome
Open the console (ctrl + shift + i)
Go to the network tab of your console
Set connection to something very slow such as GPRS
Load the page
You'll see that the page does it's jump before google maps is even loaded. It's the other elements that are loaded onto the page shifting things around. Why Chrome does this and Firefox does not is probably some very minor difference in interpreting the page. There's a lot going on with that page so tough to say looking at it from the outside. Try removing elements that are loaded onto the page one by one and figure out which element is causing the jump.
I have a site, created with a template, that works just fine on Chrome, Edge, Safari, etc... but in firefox it crashes. It's a thing with a JS code that animates the images in the home page. You can see what I'm talking about in www.andarescolombia.com
If you go to that site in chrome you'll see the images on the home page working fine, but on firefox they seem to get collapsed to the top of the container:
On Chrome:
On Firefox:
So the images collaps in firefox, but the other JS plugins are working just fine. I already tryed to contact the seller, but they just have a lousy customer support service.
Please help!!
just avoid using $. it should prevent your error from occuring in firefox.
On the other hand why do you want to trigger the scroll event on window.load ? Oo
just wrap the magic you're using inside a function and call it on load and on scroll. saves you a lot of headaches.
I'm generating my DOM entirely in JS, and it works great in all browsers including Chrome, except on a Mac, Chrome seems to randomly decide to not load background images (used in sprites and such) ...
the network panel does not show the images loaded, however they are present in the resources panel.
the images do load if I reload the page, but once I navigate, thus re-generating the DOM the images stop loading randomly however consistently (the problem keeps occurring in different places).
I'm attempting to implement gMap [1] on a website and I've got it partially functioning. The map shows up properly in Chrome and Safari but fails in Firefox, IE, and Opera (latest versions of all). I have the Google Map API key loading as the first javascript resource in my header, followed by jQuery and then finally my call at window load (in aaolm.js). Essentially what happens in the browsers that fail is that the map is partially rendered with the Google Maps controls but the actual map view is blank. In Chrome and Safari the map renders with no problems. The below page is an example of what's happening:
http://www.advancedaquarist.com/events/reefstock-march-12-2011
I'm really at a loss as to why this is happening. Any help would be appreciated. Thanks!
[1] http://gmap.nurtext.de/examples.html
I had this issue as well. Seems that a very common "responsive design" technique (img{max-width:100%;}) is to blame. If you can undo this by a max-width: none; on the images within the map divs, you're all set.
Its going to be a div sizing issue..
Try making the div that contains your map a specific size, rather than 100%.. and you will probably find your map appears..
There's a bit of info here:
http://econym.org.uk/gmap/basic19.htm
Duncan.