Chrome開発者ツールのスクリーンショットバグ || log.pocka.io

概要

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

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

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

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