概要

HeadlessなChromeをRemote Debugging Protocol経由で操作してスクリーンショットを撮っていたらバグに遭遇した。

事象

ページ全体のスクリーンショットをとった際に、一部サイトのレイアウトがおかしくなる。

原因

サイト内CSSでvhを使っている場合、それがスクリーンショット範囲(クリップ領域)の高さで計算される為、その要素の高さがおかしくなる(ページコンテンツの総高さに引っ張られる)。 特にサイトのメインコンテンツを100vhとかで指定している場合は顕著。

対処

公式にバグ報告が上がっているので祈りながら待つしかない...

https://bugs.chromium.org/p/chromium/issues/detail?id=761136