Chrome開発者ツールのスクリーンショットバグ

作成日: 2017/9/29, 更新日:

更新履歴

この記事は1年以上更新されていません
内容が古くなっている可能性があるため注意してください

概要

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

事象

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

原因

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

対処

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

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