CSS content-visibilityを設定すると子要素が表示できない。

content-visibilityを設定すると

<div style="position:absolute;bottom:-80px;background:red;height:100%;z-index:999999">この要素が表示できない</div> の部分の描画がされなくなります子要素に設定したposition:absolute;bottom:-80px;が問題のような気がしますなぜか、わかりませんでしょうか

表示されない例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Content Visibility Example</title>
  <style>
    body {
      height: 2000px;
    }
    
    .container {
      padding-top:2000px;
      padding-bottom:2000px;
      box-sizing:border-box;
      height: 1000px;
    }

    .content {
      content-visibility: auto;
      contain-intrinsic-size: 500px;
      position:relative;
      background-color: lightblue;
      height:50px;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="content">
      <p>このコンテンツは、ビューポートに入るまで描画されません。</p>
<div style="position:absolute;bottom:-80px;background:red;height:100%;z-index:999999">この要素が表示できない</div>
    </div>
  </div>

</body>
</html>

表示される例
content-visibilityを消した

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Content Visibility Example</title>
  <style>
    body {
      height: 2000px;
    }
    
    .container {
      padding-top:2000px;
      padding-bottom:2000px;
      box-sizing:border-box;
      height: 1000px;
    }

    .content {
      position:relative;
      background-color: lightblue;
      height:50px;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="content">
      <p>このコンテンツは、ビューポートに入るまで描画されません。</p>
<div style="position:absolute;bottom:-80px;background:red;height:100%;z-index:999999">この要素が表示できない</div>
    </div>
  </div>

</body>
</html>

行動規範の内容に同意します

回答2件

content-visiblity:autoは描画拘束(paint containment)を有効にします。よって、content-visibility:autoを指定した要素の子孫要素は、content-visibility:autoを指定した要素からはみ出て描画することは一切できません。

投稿2025/08/05 23:49

int32_t

総合スコア21954

ベストアンサー

auto
この要素の、レイアウト抑制、スタイル抑制、描画抑制をオンにします。
content-visibility - CSS: カスケーディングスタイルシート | MDN

とあるとおり、contain: layout style paint;と同じ効果があります。

contain: paint;には以下のような効果があります。

paint

その要素の子孫を、境界の外に表示しません。包含ボックスが画面外の場合、ブラウザーは中の要素を描画する必要はありません。そのボックスに完全に含まれていれば、やはり画面外にあるからです。子孫が包含要素の領域を溢れている場合、子孫は包含要素の境界ボックスで切り取られます。

contain - CSS: カスケーディングスタイルシート | MDN

『この要素が表示できない』は、.contentの境界の外にあるため、表示されません。これはheight: 500pxなどとすることにより確かめることができます。

投稿2025/08/06 00:02

Lhankor_Mhy

総合スコア37568

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問