I have just tried the solutions presented in Why is an embedded google map altering Safari's font rendering? and was hoping this would fix the issue, seeing as they are both webkit based browsers.
However, I still see a difference with some text, specifically, the text which is within position: fixed sections of content (i.e. the header, and menu sections) after I add the Google Map to the page.
I am using the Google Maps API to embed the map on the page on page load as follows:
$(document).ready(function() {
createMap("gmap", "<?php echo $this->business['location']; ?>");
});
function createMap(target, location) {
var url = "http://maps.google.com/maps/api/geocode/json?address=" + location + "&sensor=false";
$.getJSON(url,function (data, textStatus, jqXHR) {
var r = data.results[0];
var jobLatLang = new google.maps.LatLng(r.geometry.location.lat, r.geometry.location.lng);
var mapOptions = {
zoom: 12,
center: jobLatLang
};
var map, marker;
map = new google.maps.Map(document.getElementById(target),mapOptions);
marker = new google.maps.Marker({
position: jobLatLang,
map: map,
title: r.formatted_address
});
marker.setMap(map);
map.panTo(marker.getPosition());
});
}
and if I block the call to createMap there is no issue with the text rendering (of course this also means no map) and I have no idea why this would cause text rendered within position: fixed elements to possibly re-render?
Any ideas?
UPDATE:
I have now been able to get the <div> element containing the map to prevent the addition of any further translates by adding style="-webkit-transform:none !important;" however the problem still persists.
UPDATE 2: I have just found a horrible workaround, which more just confirms the issue, than fixes it. using the following function from Is it possible to remove inline styles with jQuery?
(function($)
{
$.fn.removeStyle = function(style)
{
var search = new RegExp(style + '[^;]+;?', 'g');
return this.each(function()
{
$(this).attr('style', function(i, style)
{
return style.replace(search, '');
});
});
};
}(jQuery));
and adding this awful piece of code after the $.getJSON call
setTimeout(function() {
$("#" + target).removeStyle("-webkit-transform");
$("#" + target).find("*").each(function() {
$(this).removeStyle("-webkit-transform");
});
}, 5000);
The fuzzy text disappears after the removal of all the inline -webkit-transform styles.
UPDATE 3:
I have decided to just use this work around, which is a slightly improved version of update 2, until something better becomes available. I have added an idle event listener to the Google Map which according to the documentation https://developers.google.com/maps/documentation/javascript/reference#Map
This event is fired when the map becomes idle after panning or zooming.
which in my case is what is required. Please note, I tried attaching the event listener to tilesloaded and you would think it would work, however it does not.
So putting it all together I have the following:
(function($)
{
$.fn.removeStyle = function(style)
{
var search = new RegExp(style + '[^;]+;?', 'g');
return this.each(function()
{
$(this).attr('style', function(i, style)
{
return style.replace(search, '');
});
});
};
}(jQuery));
var mapTargetElement, mapIdleListener;
function createMap(target, location) {
mapTargetElement = target;
var url = "http://maps.google.com/maps/api/geocode/json?address=" + location + "&sensor=false";
$.getJSON(url,function (data, textStatus, jqXHR) {
var r = data.results[0];
var jobLatLang = new google.maps.LatLng(r.geometry.location.lat, r.geometry.location.lng);
var mapOptions = {
zoom: 12,
center: jobLatLang
};
var map, marker;
map = new google.maps.Map(document.getElementById(target),mapOptions);
mapIdleListener = google.maps.event.addListener(map,'idle',removeWebkitTransforms);
marker = new google.maps.Marker({
position: jobLatLang,
map: map,
title: r.formatted_address
});
marker.setMap(map);
map.panTo(marker.getPosition());
});
}
function removeWebkitTransforms() {
google.maps.event.removeListener(mapIdleListener);
$("#" + mapTargetElement).removeStyle("-webkit-transform").find("*").each(function() {
$(this).removeStyle("-webkit-transform");
});
}
