6

For some reason on Safari 5.1.5 Google Maps is blurring some of my images. Take http://catpr.com/craig-chapman/ for example - when it loads the chandelier renders crisply for a moment, and then blurs out.

Removing 

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false">   </script>

from my code stops this happening. It only seems to affect Safari - this doesn't happen in Firefox or Chrome. I haven't tested any older versions of Safari, so it may be a bug? I've also tried clearing my cache, restarting my computer + updating Safari, no change.

Any ideas?

Thanks

SparrwHawk
  • 13,581
  • 22
  • 61
  • 91
  • Just tried it on Firefox, I can attest that it works fine. This seems like it's a browser specific issue. You might want to add a vanilla "Safari" tag to the post and remove "image processing" as it doesn't fit the description. – Mr. Llama Apr 03 '12 at 22:21
  • If you came here because you experience this on mobile devices and the solutions don't help, please see http://code.google.com/p/gmaps-api-issues/issues/detail?id=4521 and star the issue – Florian Oct 27 '12 at 13:43

3 Answers3

8

This issue is now occurring for me with the difference between the 3.8 and 3.9 API on Chrome (23 beta). If I specify the 3.9 API, it shows the maps correctly for a split second and then makes everything blurry. If I specify the 3.8 API it works as it should.

You can see the problem here:

The problem is on http://melbourne.origami.org.au ; I've currently set the 3.8 API as a workaround, but when v10 is eventually released, it's going to likely force 3.9 to be the lowest available API.

From my own poking about, 3.9 and 3.10 seem to invoke Chrome (and by extension Safari I would imagine) to render everything with GL compositing as it adds -webkit-transform: translateZ(0); to all map elements. This appears to be the cause of things looking hideous.

Adi Lester
  • 24,731
  • 12
  • 95
  • 110
Mike
  • 141
  • 2
  • 5
6

I also had this problem, with the map itself and fonts on the page. After a long time trying to fix this, this are my conclusions:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.5&sensor=false"></script>

The first one (same as yours) gives me blurry maps. If I comment it out and force the version 3.5 the maps are crisply and happy!

I also had problems with Google Maps API changing anti-aliasing in my website fonts. I managed to fix this on my main style.css:

* {
    -webkit-font-smoothing: subpixel-antialiased !important;
}

I hope this helps you or someone. Note: I'm using the twitter bootstrap framework.

TCB13
  • 3,067
  • 2
  • 39
  • 68
-1

I am unable to reproduce the bug in Safari. However, two possible workarounds:

  1. Load the script asynchronously. Check out the basic Getting Started page of the maps api and find the section Asynchronously Loading the API: http://goo.gl/m9OwJ

  2. Try using a Google Static Maps image instead, which won't load the JavaScript just an image of the map. http://goo.gl/wY8lF. I suggest that because you appear to not be using the dynamic features of the Google Maps API.

Mano Marks
  • 8,761
  • 3
  • 27
  • 28
  • Thanks for your suggestions Mano. I tried the Async method, it didn't fix the problem. I'd rather use a dynamic map because it is less work to maintain, but I've gone with your suggestion of using an image instead for now, which of course fixes the problem. Thanks again – SparrwHawk Apr 05 '12 at 09:58