Skip to content

Instantly share code, notes, and snippets.

@robhrt7

robhrt7/dabblet.css

Created September 4, 2012 08:30
Show Gist options
  • Save robhrt7/3618519 to your computer and use it in GitHub Desktop.
Save robhrt7/3618519 to your computer and use it in GitHub Desktop.
Download ZIP
Подборка багов CSS Анимаций и их решений
Raw
dabblet.css
/**
* Подборка багов CSS Анимаций и их решений
*/
/*1*/
.no_sec {transition: opacity 1s, box-shadow 0; box-shadow: 0 0 5px 5px #000;}
.no_sec:hover {opacity: 0; box-shadow: none;}
/*2*/
.pseudo {position: relative; transition: opacity 1s;}
.pseudo:hover {opacity: 0;}
.pseudo::after {
content: 'pseudo';
position: absolute;
left: 0; top: 100%;
height: 10px; width: 100%;
background: blue;
font-size: 10px; line-height: 1;
}
/*3*/
.with_sec.shadow {transition: opacity 1s, box-shadow .3s;box-shadow: 0 0 5px 5px blue;}
.with_sec.shadow:hover {opacity: 0; box-shadow: none;}
/*4*/
.scale {
transition: transform 1s;
/*-webkit-backface-visibility: hidden;*/
}
.scale:hover {transform: scale(1.5)}
/*5*/
.inline {width: auto; height: auto; overflow: hidden;}
.inline b {opacity: 0; transition: opacity 1s; display: block; max-height: 0;}
.inline:hover b {opacity: 1; display: inline; }
/*5.1*/
@-webkit-keyframes reveal {
from { opacity: 0; }
to { opacity: 1; }
}
.inline.anim:hover b {-webkit-animation: reveal 1s;}
/*7*/
.bg_img {
background: red url(https://dl.dropbox.com/u/6594451/for_demos/zoom.png);
transition: background-color 1s linear, background-image 0s linear 1s;
}
.bg_img:hover {background: blue url(https://dl.dropbox.com/u/6594451/for_demos/ok.png);}
/*8*/
.opacity {position: relative; width: 200px;}
.opacity b {
position: absolute; top: 0; left: 0;
height: 20px; background: blue;
font-size: 10px; line-height: 1;
}
.opacity i {
display: block;
opacity: 1;
transition: 1s opacity .5s;
background: green;
}
.opacity:hover i {opacity: 0;}
/*Presentational*/
body {font-family: Arial;}
div {
display: inline-block;
vertical-align: top;
width: 50px; height: 50px;
background: red;
margin: 10px;
color: #fff;
font-size: 40px;
line-height: 50px;
text-align: center;
}
.abs-num {
position: absolute;
top: 0;
right: 0;
}
Raw
dabblet.html
<h2>Opera</h2>
<p>1. При комбинировании анимаций, например opacity с box-shadow, могут наблюдаться проблемы в Опере (блок 1) - когда тень полностью исчезает вместе с ховером, при обратной анимации тень возвращается с задержкой и без ожидаемой плавности.</p>
<div class="no_sec">1</div>
<p>Что бы избежать бага, нужно отдельно анимировать тень и пробовать подбирать другие значания скорости перехода.</p>
<p>2. Блоки с псевдоэлементами проблемно анимируются в Opera 12, оставляя схожие артефакты с первым примером (блок 2), причем в Opera 11.64 работает стабильно.</p>
<div class="pseudo">2</div>
<h2>Firefox</h2>
<p>3. Если не указать значение "s" (секунд) в transition, Firefox игнонирует анимацию полностью (блок 1). В блоке 3 выставлено рабочее значение анимации тени в Firefox.</p>
<div class="no_sec">1</div>
<div class="with_sec shadow">3</div>
<h2>Webkit</h2>
<p>4. В Chrome на маке (как минимум до 23ой верисии), при исползовании transition вместе с transform (блок 4), а так же и при других условиях, ломается сглаживание текст на всей странице.</p>
<p>Проблему помогает решить backface-visibility, но такой фикс тоже имеет свои последствия.</p>
<div class="scale">4</div>
<p>5. В Chrome не работает transition если блок меняет свойства с display: block -> display: inline/inline-block (блок 5). Что бы обойти проблему, нужно применять animation (блок 5.1).</p>
<div class="inline">5 text <b>hidden text</b></div>
<div class="inline anim">5.1 text <b>hidden text</b></div>
<p>6. В Chrome на Win, во время плавной анимации transform, все инпуты получают белый фон (блок 4 с трансформом и 6 с инпутом).</p>
<p>Подобный эффект так же наблюдается, если на любой элемент страницы применить backface-visibility.</p>
<div class="scale">4</div>
<div style="width: auto">6 <input type="submit"></div>
<h2>Общие баги</h2>
<p>7. Нигде кроме Webkit не работает transition на background-image, нельзя поставить даже задержку, картинка меняется мгновенно (7 блок).</p>
<div class="bg_img">7</div>
<p>8. Во время transition, блок с анимацией opacity перекрывает другие блоки.</p>
<p>Что бы избежать проблему, нужно поставить блоки, на которые не нужна анимация ниже в доме (так они автоматически получат выше z-index), либо прописать z-index вручную (блок 8.1).</p>
<div class="opacity"><span class="abs-num">8.</span>
<b>no anim</b>
<i>anim</i>
</div>
<div class="opacity"><span class="abs-num">8.1</span>
<i>anim</i>
<b>no anim</b>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment