[コメントアート]横幅が長いコメントがあるとchromeで動画が緑になったり動作が止まったりする(191023追記)

/

先月終わりぐらいにこういう現象が話題になっていました。

【ニコニコ動画】Google Chromeから視聴した際、一部投コメ動画にて、緑背景の出現及びコメントの挙動がおかしくなる事象まとめ - Togetter

(まとめのタイトルは投稿者コメントですが、通常コメントでも起こそうと思えば起こせます。)

緑になる現象

具体的にはこんな感じになります。(元は真っ黒な動画で、長いコメントを出しただけです。)
画像のように動画が緑一色になったり、水玉の円が出る等動画の再生が止まった状態になったりします。
症状が酷いと読み込めませんでした等も出ます。

この「緑になる現象」について調べたことをまとめておきます。

191023追記 : chrome78.0.3904.70で、検証用データで緑になる現象が発生しなくなったことを確認したため、追記しました。
「firefoxで描画されない現象」は現在もあるため、そちらにはある程度注意する必要があります。
(「 firefox等での近い現象」だった文言を「firefoxで描画されない現象」に変更しました。)

条件

緑になる現象は、以下のような条件で発生するようです。

  • google chrome 77.0.3865.90ぐらいのバージョン
  • 設定でハードウェアアクセラレーションが有効
  • コメントの横幅が長い(内部的に16384pxを超える)

191023追記 : chrome78.0.3904.70では発生しなくなったようです。

naka(右から左に流れる)コメントで、発生条件を満たすような全角文字数は次の表のようになります。

サイズコマンド 全角文字数
big 209.95
medium 303.27
small 454.90
big(改行リサイズあり) 409.41
medium(改行リサイズあり) 584.87
small(改行リサイズあり) 818.82

よって、この表より小さい幅に収めたコメントをする必要があります。
超えてしまうと、chromeでの視聴者が動画を見れなかったり高負荷になったりします。

原因

どうやら、最近のchromeはcanvasで長辺が16384pxを超えるような描画をしようとすると、高負荷になったり失敗するようになったようです。
例えば、https://bugs.chromium.org/p/chromium/issues/detail?id=1008179 等が近い不具合です。

こういったことの影響か、ニコニコ動画ではコメントを描画した物が16384pxを超えてしまう時に「緑になる現象」が発生するようです。
前はもう少し大きい物でも問題なく描画できたようで、それがいつからか小さい値に変化したことによって、過去に作った時には問題なく視聴できたコメントアート作品等に被害が出ました。

なお、ハードウェアアクセラレーションを無効にした場合は発生しなくなるようです。

コメントの内部的な幅

コメントを描画する際、コメント毎に以下のような式で算出される幅のcanvas要素が内部的に用意されて文字が描画されているようです。

(一番横に長い行の幅 + 1 + 2.8) * 描画解像度

ただし、小数点以下切り上げです。
(このcanvas要素はテクスチャのように、描画しておいた文字と縁取りをコメントの移動に合わせて再描画したりという風に使われています。)

描画解像度は、PC版でパフォーマンス設定が「標準」の場合2です。

全て全角文字で構成するとすると、

一番横に長い行の幅 = フォントサイズ * 文字数

であるので、そこから逆算すると、16385px(=16384+1)になるような文字数は

(16385 - (1 + 2.8) * 2 - 0.999...) / (フォントサイズ * 2)

で算出できます。これで算出した値が先ほども出した表です。
ちなみに、フォントサイズはコマンドによって決まり、次の表の通りです。

コマンド フォントサイズ
big 39
medium 27
small 18
big(改行リサイズあり) 20
medium(改行リサイズあり) 14
small(改行リサイズあり) 10

また、描画解像度はPC版でパフォーマンス設定が「軽量」の場合は、画面サイズの設定により異なりますが、「標準」よりも小さい値になっています。(画面サイズ自動の場合は1.5、画面サイズ固定(小)の場合は0.9375程度など。)
なので、「軽量」に設定している場合は条件の表の文字数を多少超えても発生しません。
(「標準」で見ている視聴者では発生してしまうので、最も厳しい条件である最初の表を守る必要があります。)

firefoxで描画されない現象について

firefoxでは長辺が327677pxを超えるような物の場合、描画できないようです。
こちらは描画に失敗して該当するコメントが表示されないだけで、動画が緑になったり高負荷になることはないようです。

このような条件になる全角文字数は、パフォーマンス設定標準であれば、以下のようになります。

コマンド 全角文字数
big 419.98
med 606.64
small 909.96

nakaでもue,shitaであっても改行リサイズがあっても、この条件を満たすと表示されないようです。

実際にueで描画されない様子

緑になる現象の方が条件が厳しいので、そちらを守ってれば問題ないですが、こちらはue,shita等の時にも条件を満たす必要があります。

どうやら、最初にリサイズ計算をしない状態の領域を確保していて、それが失敗して描画できなくなるようです。
(chromeは最初に確保される領域がいくら大きくても描画が失敗することはなく、緑になる現象の条件を満たしても頻発するわけではないようです。)

固定コメントについて

ue,shitaのコメントでも緑になる現象が発生することがあります。

ue,shitaの場合、横幅リサイズがあるため画面横幅以上には描画が大きくなることはないです。
しかし、10pxより小さい文字は一部ブラウザでは描画できない仕様なので、それが必要な場合10pxで内部的にcanvasに描画したうえで描画したものを縮小するという処理をしています。
そのため、非常に細かい文字の描画では内部的に用意されるcanvasの横幅が大きくなって、条件を満たしてしまって発生することがあります。

(16385 - (1 + 2.8) * 2 - 0.999...) / (フォントサイズ * 2)

の式に10pxを代入すると818.82文字となるので、おおよそこのぐらいの文字数で発生します。
ただ、ツールで内部値を観察すると、式の2.8の部分が縮小率次第で大きくなったり、場合により負の数になったりします。
そのため厳密に何文字で発生するかは状況次第になります。

たとえばue big minchoなコメントでは全角幅835文字分で発生し、全角幅834文字分で発生しないというようなことが確認できます。

固定の場合、幅が800文字近くにならないよう、例えば余裕を見て600文字程度に抑えておくなどにしてコメントアートを制作しておくと、安全だと思います。

600文字のブロックの表示

なお、600文字のブロックの表示は上のような状態です。
ほぼ文字が何か見えないため歌詞等で使うこともなく、縦方向の面積を稼ぐのが難しいので絵でもあまり利用する事はないと思います。
(また、前述のfirefoxが描画されない条件を守る必要があります。)

コメントの縦幅について

コメントの縦幅が非常に長い場合も発生することが予想されます。
ただ、発生条件は画面の内部的な縦幅(384px * 解像度 = 768px)よりはるかに大きい値であり、利用する必要がほぼないと思います。

検証用データ

検証用に、緑になる現象が発生する境界付近のコメントのデータを以下に用意しておきます。
実際にyammabooのPCでは執筆時点で再現しました。

[ { "time": "00:10.00", "command": "shita @10", "comment": "big 標準 safe(209 < 209.95)" }, { "time": "00:13.00", "command": "big gothic blue", "comment": "█████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████" }, { "time": "00:20.00", "command": "shita @10", "comment": "big 標準 unsafe(210 > 209.95)" }, { "time": "00:23.00", "command": "big gothic red", "comment": "██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████" }, { "time": "01:10.00", "command": "shita @10", "comment": "medium 標準 safe(303 < 303.27)" }, { "time": "01:13.00", "command": "medium gothic blue", "comment": "███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████" }, { "time": "01:20.00", "command": "shita @10", "comment": "medium 標準 unsafe(304 > 303.27)" }, { "time": "01:23.00", "command": "medium gothic red", "comment": "████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████" }, { "time": "02:10.00", "command": "shita @10", "comment": "small 標準 safe(454 < 454.90)" }, { "time": "02:13.00", "command": "small gothic blue", "comment": "██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████" }, { "time": "02:20.00", "command": "shita @10", "comment": "small 標準 unsafe(455 > 454.90)" }, { "time": "02:23.00", "command": "small gothic red", "comment": "███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████" }, { "time": "03:10.00", "command": "shita @10", "comment": "big2 標準 safe(409 < 409.41)" }, { "time": "03:13.00", "command": "big gothic blue", "comment": "█████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████\n*\n*\n*" }, { "time": "03:20.00", "command": "shita @10", "comment": "big2 標準 unsafe(410 > 409.41)" }, { "time": "03:23.00", "command": "big gothic red", "comment": "██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████\n*\n*\n*" }, { "time": "04:10.00", "command": "shita @10", "comment": "med2 標準 safe(584 < 584.87)" }, { "time": "04:13.00", "command": "medium gothic blue", "comment": "████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████\n*\n*\n*\n*\n*" }, { "time": "04:20.00", "command": "shita @10", "comment": "med2 標準 unsafe(585 > 584.87)" }, { "time": "04:23.00", "command": "medium gothic red", "comment": "█████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████\n*\n*\n*\n*\n*" }, { "time": "05:10.00", "command": "shita @10", "comment": "small2 標準 safe(818 < 818.82)" }, { "time": "05:13.00", "command": "small gothic blue", "comment": "██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████\n*\n*\n*\n*\n*\n*\n*" }, { "time": "05:20.00", "command": "shita @10", "comment": "small2 標準 unsafe(819 > 818.82)" }, { "time": "05:23.00", "command": "small gothic red", "comment": "███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████\n*\n*\n*\n*\n*\n*\n*" } ]