1

これはクロムでのみ発生します（おそらくすべてのWebkitブラウザーですか？）-次のようにマップを埋め込むと：

<iframe
    id="contactsMap"
    frameborder="0" 
    scrolling="no" 
    marginheight="0" 
    marginwidth="0" 
    src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=<?= $contact['imagePopupAddress'] ?>&aq=&sll=<?= $contact['mapLocation'] ?>&sspn=<?= $contact['mapLocation'] ?>&vpsrc=0&ie=UTF8&hq=&hnear=<?= $contact['imagePopupAddress'] ?>&t=m&z=16&ll=<?= $contact['mapLocation'] ?>&output=embed">
</iframe>

それはすべてうまく表示されますがdiv、マップをオーバーレイする を作成すると、その div のテキストはすべてぼやけて表示されます (画像も)。

私が試したこと：

* {
  -webkit-font-smoothing: subpixel-antialiased !important;
}
.google-map.google-map-wide 
{ 
  -webkit-transform: none !important;
}

他に何を試すことができますか？

http://jsfiddle.net/31pxt917/ を編集

4

1 に答える 1

0

skew変換を使用してから元に戻すため、ぼかしが発生しますskew。より良い方法は、別の dom 要素または疑似要素 (:beforeまたは:after) を使用することです。このフィドルのようなもの

<div style="position: relative">
<iframe id="contactsMap" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=703 8th Ave&aq=&sll=40.758595, -73.988841&&sspn=40.758595, -73.988841&&vpsrc=0&ie=UTF8&hq=&hnear=703 8th Ave&t=m&z=16&ll=40.758595, -73.988841&output=embed"></iframe>
<div class="overlay"> 
    <div class="content">
        <span>some text goes here</span>
        <a href="#">a random link</a>
    </div>
</div>
</div>

#contactsMap {
    width: 100%;
    float:left;
    height:300px;
    position:relative;
}
.overlay{height: 300px;}

.overlay:before {
    content: '';
    display: block;
    width:100%;
    height:150px;
    background:#000;
    color:#fff;
    position:absolute;
    bottom: 0;
    -webkit-transform: skew(-9deg);
    -moz-transform: skew(-9deg);
    -o-transform: skew(-9deg);
    transform: skew(-9deg);

}
.content {
    top: 150px;
    height: 150px;
    width: 100%;
    position: absolute;
    padding: 5px 15px;
}
.overlay a, .overlay span {
    color:#fff;
}
于 2015-07-30T11:47:05.320 に答える