web-dev-qa-db-ja.com

中間のレイヤーに高さが指定されている場合、不透明度の移行中にTranslateZは適用されません

この問題はChromiumバグ追跡システムに追加されました： https://bugs.chromium.org/p/chromium/issues/detail?id=1056331

私はこのマークアップを持っています：

const toggle = () => {
  let el = document.getElementById("middle");

  if (el.classList.value.includes("fade-in")) {
    el.classList.remove("fade-in");
    el.classList.add("fade-out");
  } else {
    el.classList.add("fade-in");
    el.classList.remove("fade-out");
  }  
}
#wrap {
  perspective: 2px;
  perspective-Origin: center;
}

.has_height {
  height: 50vh;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.3s linear;
}

.fade-out {
  opacity: 0;
  transition: opacity 0.3s linear;
}

#img {
  transform: translateZ(1px);
  width: 200px;
  height: 200px;
  left: 35%;
  position: absolute;
  background-image: url("data:image/jpeg;base64,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");
}
<a onclick="toggle()">Toggle opacity</a>

<div id="wrap">
  <div id="middle">
    <div class="has_height"> <!-- REMOVE HEIGHT HERE -->
      <div id="img"></div>
    </div>
  </div>
</div>

ここで、.wrapにはperspectiveがあり、#imgにはtranslateZがあり、ボタンをクリックすると画像がフェードインまたはフェードアウトするように切り替えることができます。

opacityのフェードシーケンス中に何らかの理由で、中間要素（#middleまたは.has_height）にtranslateZが適用されている場合、heightは適用されません。

私はこれがなぜ起こっているのか本当に理解していません、そしてこの問題を説明するために [〜＃〜] codepen [〜＃〜] を作りました。

コードペンでクラスの高さを削除するとhas_heightは正常に機能します。しかし、高さを追加すると、snapになり、フェードインが終了した後でのみtranslateZを適用します。

また、has_heightまたはmiddleに高さを適用したときに発生するだけでなく、height- layout（Flexbox、Table、position：top、bottom、left、右0）

注：興味深いことに、これは最新のFirefoxでは正常に機能しますが、Chromeでは機能しません

編集：ChromeおよびWebkitタグを追加

編集2：発生すると思われることのGIFを作成しました： Gifyuのここを参照 これが最新のFirefoxでの動作方法です画像は最初から大きく（translateZのため）、フェードインおよびフェードアウトし、サイズは変わりません。

htmlcssgoogle-chromewebkit
8
supersize

perspectiveプロパティが設定された親要素があるとします。現在、opacityが1より小さい子要素は、translateZをレンダリングしません。これをchromeまたはWebkitブラウザのバグと見なす必要があるかどうかはわかりません。

したがって、opacityとtranslateZを使用する必要がある場合は、perspectiveをopacityと同じ要素に追加します。

以下の例では、perspectiveを処理する.middle要素にopacityを追加しています。

const toggle = () => {
  let el = document.getElementById("middle");

  if (el.classList.value.includes("fade-in")) {
    el.classList.remove("fade-in");
    el.classList.add("fade-out");
  } else {
    el.classList.add("fade-in");
    el.classList.remove("fade-out");
  }  
}
#wrap {
  /* perspective: 2px; */
  /* perspective-Origin: center; */
}

#middle {
  perspective: 2px;
  perspective-Origin: center;
}

.has_height {
  height: 50vh;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.3s linear;
}

.fade-out {
  opacity: 0;
  transition: opacity 0.3s linear;
}

#img {
  transform: translateZ(1px);
  width: 200px;
  height: 200px;
  left: 35%;
  position: absolute;
  background-image: url("data:image/jpeg;base64,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");
}
<a onclick="toggle()" style="text-decoration: underline;cursor: pointer">Toggle opacity</a>

<div id="wrap">
  <div id="middle" class="fade-in">
    <div class="has_height"> <!-- REMOVE HEIGHT HERE -->
      <div id="img"></div>
    </div>
  </div>
</div>
1
RaviNila