368 words
2min read
Edit

Scroll Container内の絶対配置またはAG Gridのバグ

Scroll Containerが包含ブロックでない場合、内部の隔離されていない絶対配置された要素はScroll Containerの外側に配置されるため、ページの高さが大きくなるといった意図しない挙動を引き起こす。

そのため絶対配置された要素を入れたい場合は、絶対配置された要素の親要素またはScroll Containerにposition: relativeを指定するなどの対応が必要。

この文章はAG Gridを利用したアプリケーションで、このバグを見かけたため書いている。

#AG Gridの例

[email protected]で動作確認を行った。

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の明確なバグである。