Почему встроенная карта google изменяет рендеринг шрифтов Chrome?

Question

Я только что попробовал решения, представленные в Why is an embedded google map altering Safari's font rendering?, и надеялся, что это исправит проблему, поскольку они оба являются браузерами на основе webkit.

Однако, я все еще вижу разницы с некоторые текста, в частности, текст, который находится в пределах position: fixed разделов контента (то есть заголовка и разделов меню) после того, как я добавить карту Google на страницу.

Я использую API Google Maps, чтобы вставить карту на странице на странице загрузки следующим образом:

$(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()); 
    }); 
} 

и если заблокировать вызов createMap нет никакой проблемы с рендеринга текста (конечно это также означает отсутствие карты), и я понятия не имею, почему это приведет к тому, что текст будет отображаться в пределах position: fixed элементов, которые могут быть повторно отображены?

Любые идеи?

UPDATE: Теперь я был в состоянии получить <div> элемент, содержащий карту, чтобы предотвратить добавление каких-либо дальнейших сдвигов, добавив style="-webkit-transform:none !important;" однако проблема все еще сохраняется.

UPDATE 2: Я только что нашел ужасный обходной путь, который еще раз подтверждает этот вопрос, чем фиксирует это. с помощью следующей функции из 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)); 

и добавить этот ужасный кусок кода после вызова $.getJSON

setTimeout(function() { 
    $("#" + target).removeStyle("-webkit-transform"); 
    $("#" + target).find("*").each(function() { 
     $(this).removeStyle("-webkit-transform"); 
    }); 
}, 5000); 

Нечеткий текст исчезает после удаления всех встроенных -webkit-transform стилей.

UPDATE 3: я решил просто использовать эту работу вокруг, который является немного улучшенной версией обновления 2, пока что-то лучше не станет доступным. Я добавил слушатель idle события на карту Google, которая в соответствии с документацией https://developers.google.com/maps/documentation/javascript/reference#Map

Это событие вызывается, когда карта становится неактивной после того, как панорамирование или масштабирования.

который в моем случае является тем, что требуется. Обратите внимание, что я попытался подключить прослушиватель событий к tilesloaded, и вы бы подумали, что это сработает, однако это не так.

Так положить все это вместе я следующее:

(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"); 
    }); 
} 

Answer 1

Код:

.google-map.google-map-wide 
{ 
    -webkit-transform: none !important;" 
} 

в код CSS.

И он сразу разобрал проблему рендеринга шрифтов.