cssのみで複雑な表現をするのが大好きな、ユゲタです。
cssを極めれば、webページを作る事に困ることがありません。
問題発覚
とあるcssアニメーションを作っている時に、何故か同じ設定のはずなのにレンダリング結果が違っている事に気が付きました。
簡単に説明すると、とある要素が45度傾いた状態で100pxほど右にずれる処理を書く場合、
cssでは次のように書きます。
<div class='box-1'>
<div class='box-2'></div>
</div>
<style>
.box-1{
position:relative;
width:300px;
height:300px;
background-color:#eee;
}
.box-2{
position:absolute;
top:100px;
left:100px;
width:100px;
height:100px;
background-color:red;
transform:rotate(45deg) translateX(100px);
}
</style>
transformの内容を次のように変更すると、
transform:translateX(100px) rotate(45deg);
微妙に表示がずれているjのが分かるでしょうか？
原因究明
わかりやすいように同時に表示してみます。
そして、transformを適用していないオブジェクトも配置してみます。
どうでしょうか？
赤色は、「rotate、translateX」の順番に書かれていて
青色は、「translateX 、rotate」の順番に書かれています。
要するに、傾いてから移動するか、移動してから傾けるかの違いで、記述する順番によって、結果が変わっているという状態だったんですね。
もちろん、表示したい内容によってどちらが正しいかは違ってくるのですが、とにかくrotateが入るとこうした順番に応じたレンダリング結果のズレが生じることを理解しておかないと、
とんでもない表示になりかねないということに気がついたというお話でした。
最後に一言
頭で考えていても、結果が違えば必ずそこに何かしらの原因がある。
コンピュータを相手にすると、何かしらの不具合を感じた時は原因はほとんど自分にあることが多いので、
ここで心が折れずにちゃんと原因を見つけることが重要なんですね。
他人からは、こういうのを見ると「バグだ！」と騒がれて腹が立つかもしれませんが、こういう参考書などにもあまり書かれていない特性を知ると、なんだかちょっとうれしくなる自分発見もできたので、
心の安定はそういうマインドで行うのが良いでしょうね。
