スマホでPatreonの表示が崩れる問題が修正された話

Patreonのサポートにいろいろ報告した結果直してもらえたという話です。

これまでの Patreon の問題

これまで Patreon を使っている中での一番の不満として、iPhone で Patreon の記事ページを閲覧したとき、自分のほとんどの記事では表示が崩れてしまい、とても閲覧できたものではない状態になるという問題がありました。

全ての端末で確認したわけではなく、少なくとも自分の生活上では iPhone で見るときに困るという状態だったのでこう書きましたが、実際には画面幅の小さい他の環境でも発生する問題だったと思います。

Zendesk から報告

Patreon のフッター部分を見ると Help Center というリンクが見つかり、どうやら Zendesk でサポートページを管理しているようだったので、ここからまず拙い英語での陳述と、簡単なスクリーンショット、現状分かっている限りでの問題の確認方法などを含めた報告を行いました。しかしそこから1週間ほど音沙汰が無かったため、解決を早められるよう、更に詳細な調査を行うことにしました。

原因調査

自分の記事特有の問題なのかどうか切り分けようと、まず他のマルチバイト言語圏の利用者を探し、記事を見てみたところ、幾つかの記事ではそれが発生しているようでした。また、英語圏の利用者の記事でも発生することを確認しました。よって、自分の執筆環境などに起因する問題ではないことが確認できました。

次に問題が起きている自分の記事で実験をし、画像を消す、コンテンツをすべて消す、記事の半分から下を消す、というようにヒューリスティックな判断を含めた二分探索を進めていったところ、どうやら長い URL が含まれている場合に問題が起きることが分かりました。これまで CSS を書いてきた中で、自分自身も数えきれないほど対処してきた問題です。

HTML のソースをチラ見してみたところ、何となく React.js と styled-components を利用していそうな雰囲気のあるコードが表示されたので、恐らく開発チームは最近の JavaScript と CSS にそれなりに明るく、かつ最近の技術の導入に積極的で活発な人達だろうと予想し、これくらいの問題なら伝わりさえすれば一瞬で対処してくれるだろうなと考えました。

対応策

この問題は、大抵の場合は body 要素に overflow-wrap: break-word を追加すると解消できます。

body 要素に適用するのは、overflow-wrap がその子孫要素にも反映される CSS プロパティなことが理由なので、body 要素ではなく、ユーザが自由記述したコンテンツが入る可能性のある適当な箇所へ指定しても構いません。大抵の場合と言ったのは、shrink-to-fit width と呼ばれるタイプの、内容に応じて幅を自動計算する類の要素では上手くいかないパターンが存在するためです。また、overflow-wrap は word-wrap から改名されたプロパティであるため、互換性を考えると word-wrap を併記した方が良いケースもあるでしょう。

Zendesk から再度報告

原因と対策が分かったところで「前回報告した問題だけど、主に URL などのながーい文字列が原因で発生していて、こういうコードを継ぎ足せばすぐに解決できる問題のはずなんで、よかったら開発チームに伝えてみてほしいです」という感じで報告してみました。

Twitter から報告

更に数日反応が無いことから、Zendesk が完全に放置されている可能性もあるなと思い、Twitter にサポート窓口的な公式アカウントを設けていないか調べたところ、ありました。リプライで利用者に積極的に反応している様子が伺えたため、Twitter からチケット番号を添えて mention で報告したところ、反応があり、結果的にこの問題は翌日に修正されていました。めでたしめでたし。

振り返り

今回自分の期待通りに修正してもらえましたが、あまりにもうるさくかつ声の大きい（影響力の大きい）報告者に対処するために、そのとき割くべきではない開発リソースを回し、本来優先して対処すべき問題を後回しにしてしまった結果、成長が伸び悩んでしまう…というケースも考えられます。サポートへの報告前に、Patreon の表示が崩れていることに自身の Twitter で 何度か言及しましたが、Zendesk への報告はともかく、Twitter などの公開された SNS 上では、あまり声高にサービスの問題に言及し過ぎるのも良くなかったなと思いました。「コンテンツが正しく表示されないことの責任はサービスプロバイダ側にあり、自分の責任ではない」ということを暗に強調したいがために、サービス側の不具合を喧伝してしまった感があり、反省しています。