14
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

position:fixedの親要素にtransform:translate3dをかけると壊れる

Last updated at Posted at 2016-11-29

タイトルの通り。
fixedをかけた要素が、position:absoluteのような挙動をしていたので調べると、

ここに同じ人が。
http://stackoverflow.com/questions/25824749/why-webkit-transform-translate3d0-0-0-messes-up-with-fixed-childs

親要素にtransform:translate3d(..)がかかってるのが原因なんですが、transformのレンダリングモデルに関係があるみたいです。

transformをかけると、このレンダリングモデルの配置システムになり、
transform:noneでもとの配置システムに戻る、とオフィシャルにも書いてありますね。
https://www.w3.org/TR/css-transforms-1/#transform-rendering

なるほどなるほど。

14
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?