Javascript 为什么嵌入式谷歌地图会改变Chrome'；什么是字体渲染？

我刚刚尝试了中介绍的解决方案，希望这能解决这个问题，因为它们都是基于webkit的浏览器

但是，我仍然看到一些文本存在差异，特别是在我将谷歌地图添加到页面后，位于

位置：固定的
内容部分（即标题和菜单部分）内的文本

我正在使用Google Maps API将地图嵌入到页面加载中，如下所示：

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

在
$.getJSON
调用之后添加这段糟糕的代码

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

删除所有内联
-webkit转换
样式后，模糊文本消失

更新3：
我决定只使用这个变通方法，它是更新2的一个稍微改进的版本，直到更好的东西可用为止。我在谷歌地图上添加了一个空闲的事件监听器，根据文档

当平移或平移后贴图变为空闲时，将触发此事件
变焦

在我的情况下，这是需要的。请注意，我尝试将事件侦听器附加到
tilesloadded
，您可能会认为它可以工作，但事实并非如此

综上所述，我有以下几点：

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

代码：

转换为CSS代码

它立刻解决了字体渲染问题。
与您的问题相符吗？在这种情况下，它看起来已经有好几年没有解决了。@elzi当然，这似乎确实是一个候选，因为呈现的谷歌地图具有
-webkit转换：translateZ（0px）这显然是为了强制GPU访问以呈现页面。唯一的区别是，这种情况下的渲染是在加载DOM之后完成的。我可能会尝试延迟几秒钟加载贴图，看看会发生什么。仅供参考，延迟贴图渲染5秒钟会导致相同的问题。@elzi问题仍然与您的建议一致，还尝试添加了
框大小：边框框
，如果您可以在某处在线获取，或者在演示中重现错误，我很乐意进一步提供帮助。我现在没有主意了，如果不在inspector中进行修补，我就无能为力。这对我不起作用。您的
CSS
声明后还有一个“符号”。
(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");
    });
}

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