作成した小さなアニメーションに問題があります。縦に表示された一連のアイコンがあり、マウスをその上に移動すると、各アイコンに関連するテキストが表示されます。
問題は、マウスを 4 番目のアイコンの上に移動してから 3 番目のアイコンに移動すると、テキストのサイズが 2 回変更されることに気付くことです。最初にアニメーションを終了しますが、テキストを含む段落のサイズを実際の幅に合わせて調整します。明らかではありませんが、問題は最初のアイコンでも発生します。
私が理解できることは、すべてのブラウザーで発生するため、単一のブラウザーのバグではありません。
ブラウザがこのように動作する理由と修正方法について何か考えはありますか?
私のHTMLは次のとおりです。
<aside id="social-bar">
<div id="facebook">
<a href="#">
<img src="icon.png" alt="Facebook icon" />
<p>Like us on Facebook</p>
</a>
<br class="clear-both" />
</div>
<div id="twitter">
<a href="#">
<img src="icon.png" alt="Twitter icon" />
<p>Follow us on Twitter</p>
</a>
<br class="clear-both" />
</div>
<div id="googleplus">
<a href="#">
<img src="icon.png" alt="Google+ icon" />
<p>+1 us on Google+</p>
</a>
<br class="clear-both" />
</div>
<div id="usergroup">
<a href="#">
<img src="icon.png" alt="Wordpress icon" />
<p>Read our User Group</p>
</a>
<br class="clear-both" />
</div>
</aside>
私のCSSは次のとおりです。
.clear-both {
clear: both;
}
#social-bar {
float: left;
position: absolute;
z-index: 1;
}
#social-bar > div {
position: relative;
margin-bottom: 0.3em;
}
#social-bar a {
float: left;
width: 32px;
height: 32px;
text-decoration: none;
overflow: hidden;
background-color: #333333;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
-o-transition: width 0.3s;
transition: width 0.3s;
}
#social-bar a:hover, #social-bar a:focus {
width: 100%;
}
#social-bar img {
vertical-align: middle;
float: left;
padding-right: 0.2em;
}
#social-bar p {
float: right;
line-height: 32px;
font-size: 0.6em;
color: #FFFFFF;
margin: 0em;
padding-right: 1em;
}
さらに、私が作成した jsfiddle を見ると、問題を確認できます。