Повернутые края DIV размыты в Chrome - PullRequest
Новая
       6

Повернутые края DIV размыты в Chrome

0 голосов
/ 16 августа 2011

У меня есть аудиопост, где информация находится в повернутых DIV, которые отображаются поверх обложки альбома. Чтобы увидеть, что я имею в виду, перейдите сюда (на страницу). Область в левом нижнем углу - это информация. При просмотре в Chrome вы увидите, что края DIV размыты. Есть ли способ "псевдоним" DIVs, чтобы они выглядели резкими? Я знаю, что это не проблема разрешения, потому что Firefox отображает их отлично. 

.audioBox {
position:absolute;
bottom:160px;
margin-left:-11px;
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
z-index:3;
width:343px;
}

.boxify {
margin:1px;
padding:5px;
float:left;
bottom:0;
width:329px;
}

.box {
background:#000; 
padding:5px;
padding-left:10px;
padding-right:10px;
margin-left:-5px;
}

<div class="audioHolder">
<div class="audioBox">

<div class="boxify" id="song">

                    <img id="audioBubble"    
src="http://static.tumblr.com/ux4v5bf/JC6lpv4v1/audio.png">

{block:TrackName}
<span class="box">{TrackName}</span>
{/block:TrackName}
</div>

<div class="boxify" id="artist">
{block:Artist}
<span class="box">{Artist}</span>
{/block:Artist}
</div>

<div class="boxify" id="label">
<span class="box">{PlayCountWithLabel}</span>
</div>

<div class="boxify" id="download">
<span class="box">Download
{block:ExternalAudio}
<a href="{ExternalAudioURL}">Download</a>
{/block:ExternalAudio}</span>
</div>

</div>

Решение: я заменил цвет фона на фоновое изображение того же цвета. :-) Надеюсь, это поможет кому-то еще с подобной проблемой.

1 Ответ

3 голосов
/ 03 апреля 2014

Я знаю, что немного опоздал, но ...

У меня сейчас похожая проблема, и в моем случае изменение размера помогает, просто используйте четные числа 

.blurry {
    left: 100px;
    height: 30px;
    width: 135px;
}

.sharp { 
    left: 200px;
    height: 30px;
    width: 136px;  
}

http://jsfiddle.net/_hags/9e4cS/

...