Размытые текст, когда карта Google будет поместить его

Question

Это происходит только на хроме - когда я вставлять карту, как это (возможно, все 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/

Answer 1

Размытие происходит потому, что вы используете skew преобразование, а затем skew обратно. Лучше всего использовать отдельный элемент dom или псевдоэлемент (:before или :after). Что-то вроде this fiddle

<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; 
}