最后一个<details>元素无法按预期实现过渡效果的问题排查

背景说明 #

• 代码使用了较新的CSS特性，目前仅在Chrome浏览器中可正常运行
• 尝试通过**尺寸插值（size interpolation）**与<details>的伪元素::details-content实现元素展开时的过渡动画，但发现最后一个details元素完全无法触发过渡，除非其后方紧跟其他元素

带有末尾div（正常工作） #

当最后一个details后存在其他元素时，所有过渡均正常：

body {
    min-height: 100svh;
}
details {
    interpolate-size: allow-keywords;
}
details > div {
    overflow:hidden;
}
details::details-content {
    block-size: 0;
    transition: block-size 0.2s ease-in-out, content-visibility 0.2s;
    transition-behavior: allow-discrete;
}
details[open]::details-content {
    block-size: auto;
}

<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    
    <details>
        <summary>summary</summary>
        <div>content</div>
    </details>
    
    <details>
        <summary>summary</summary>
        <div>content</div>
    </details>
    
    <details>
        <summary>summary</summary>
        <div>content</div>
    </details>
    
    <div>end</div>
  </body>
</html>

移除末尾div（最后一个元素过渡失效） #

移除末尾的div后，最后一个details元素的过渡效果完全失效：

body {
    min-height: 100svh;
}
details {
    interpolate-size: allow-keywords;
}
details > div {
    overflow:hidden;
}
details::details-content {
    block-size: 0;
    transition: block-size 0.2s ease-in-out, content-visibility 0.2s;
    transition-behavior: allow-discrete;
}
details[open]::details-content {
    block-size: auto;
}

<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    
    <details>
        <summary>summary</summary>
        <div>content</div>
    </details>
    
    <details>
        <summary>summary</summary>
        <div>content</div>
    </details>
    
    <details>
        <summary>summary</summary>
        <div>content</div>
    </details>
    
  </body>
</html>

内容的提问来源于stack exchange，提问作者dimmerz