Scroll Container内の絶対配置またはAG Gridのバグ
Scroll Containerが包含ブロックでない場合、内部の隔離されていない絶対配置された要素はScroll Containerの外側に配置されるため、ページの高さが大きくなるといった意図しない挙動を引き起こす。
そのため絶対配置された要素を入れたい場合は、絶対配置された要素の親要素またはScroll Containerにposition: relativeを指定するなどの対応が必要。
この文章はAG Gridを利用したアプリケーションで、このバグを見かけたため書いている。
AG Gridの例
ag-grid-react@v35.0.1で動作確認を行った。
AGGridReactコンポーネントは、次の要素を挿入する。
<div class="ag-aria-description-container" aria-live="polite" aria-relevant="additions text" aria-atomic="true">Press ENTER to sort. Press CTRL ENTER to open filter</div>.ag-aria-description-container { border: 0; z-index: 9999; clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px;}この要素は絶対配置された要素だが、AGGridReactコンポーネントは包含ブロックを形成していないため、Scroll Container内などで意図しない挙動を起こす原因になる。
加えて、この要素は問題があるにも関わらず不可視であるため、デバックを困難にしている。
一般的な実装として、絶対配置された要素を加えるコンポーネントで隔離する(ルートで包含ブロックを形成するなど)のが当然であり、これはAG Gridの明確なバグである。