Help us understand the problem. What is going on with this article?

chromeでabsoluteな要素にclipすると子要素ごと切り抜かれる件

More than 1 year has passed since last update.

この話は一体

親要素がposition: absolute;になってる小要素をclipすると親要素ごと抜けちゃうchromeのバグについて
Chrome bug with css clip on nested divs
でもあげられてるやつです。
ちなみに執筆時点でのchromeのバージョンは63.0.3239.132です。

現象

再現コード

html構造
.outer
  .parent
     .child

こんなDOMに対してこんなcss(scss)書く

.outer {
  position: relative;
  width: 500px;
  height: 300px;
  background: pink;
}

.parent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: skyblue;

  .child {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: orange;
    clip: rect(0, 100px, 200px, 0);
  }
}

※ 一番外側(.outer)がピンクで次(.parent)がスカイブルーで最後(.child)がオレンジに設定しています

in FireFox

スクリーンショット 2018-01-23 20.21.19.png

.child(オレンジ部分)が切り抜かれて.parent(スカイブルー部分)が露出しています。

in Chrome

スクリーンショット 2018-01-23 20.23.01.png

.parent(スカイブルー部分)ごと切り抜かれて大外の.outer(ピンク部分)が露出しています

バグが治るまでの対応

stackoverflowでは.parentと.childを親子関係から兄弟関係にしてabsoluteで重ねて抜けってかいてるけどDOM構造変えたくなかったので色々ためしたところ、borderとかbox-shadowとか境界的なプロパティを.parentに設定したら抜けなくなったのでなるべく副作用の少ない透明なbox-shadowをつけることにしました。

Fixコード

修正スタイル
.parent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: skyblue;
  box-shadow: 0 0 0 rgba(0,0,0,0); // <-- これ
  .child {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: orange;
    clip: rect(0, 100px, 200px, 0);
  }
}

in Chrome

スクリーンショット 2018-01-23 20.28.42.png

まとめ

ぶっちゃけ親子構造変えていいなら謎コード残らないほうがよいのでstackoverflow的にsiblingにすると良いと思います。
それしたくない場合は境界系のスタイル(borderとかbox-shadow)でお茶濁してchromeが治すのまちましょう。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away