0

OSXでのみ発生します

私のナビゲーションには、cssとjQueryで実行されるサブメニューがあります。

（これはOSXでのみ発生します。ほとんどの主要なブラウザでOSX Lion 10.8で試しました）グーグルマップが存在する場合、そのサブメニューのフォントはサイズではなく「縮小」されましたが、薄く見えます。ビットとフォントスムージングまたはフォントの重みである可能性がありますが、私はそれを修正することができませんでした。

jsfiddleにコードの抜粋があります。これは、人々を混乱させるのに十分な大きさであるためです。htmlcssとjavascriptの両方が抜粋です。コードを最小化して、皆さんが簡単にできるようにしました。また、グーグルマップを追加および削除するための非常にシンプルな機能を備えた2つのボタンを追加したので、問題を確認でき、更新する必要もありません。

http://jsfiddle.net/SGWMx/

私はそれを分離し、空白のページを開始し、それを取得するまで物事を削除し始めたので、問題はgmap/cssにあるとほぼ確信しています。そして、例でわかるように、JavaScriptを大幅に削減しました。グーグルマップの読み込みでさえ非常に基本的であり、それでもフォントが台無しになっています。

function initialize(){

    var coords = new google.maps.LatLng(55.378051, -3.43597299999999);

    var mapOptions = {
        zoom: 5,
        center: coords,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}

また、フォント自体ではありません。私のコンピューターでは実際に別のフォントを使用していたため、互換性のためにhelvetica/arialに設定するだけです。

OSXでのみ発生します

4

1 に答える 1

1

さて、実際の問題は、 -webkit-transform: translateZ(0);上のプロパティ#map_canvasとその子です。残念ながら、これを削除することはできません。Googleマップで使用されています。

この答えはあなたに何が起こっているかについての考えを与えるかもしれません：CSS移行中にWebkitテキストレンダリングの変更を防ぐ方法

したがって、私のコメントによると、唯一の本当の解決策は、の使用を避けることsubpixel-aliasedです。

html {
    -webkit-font-smoothing: antialiased
}
于 2012-11-28T15:33:20.267 に答える