Power BI Service でカスタムビジュアルがぼやける理由 ― レンダリングパイプラインの技術的考察

Power BI Service を使っていると、表示倍率を変えた瞬間にカスタムビジュアルがぼやけることがあります。最初はビジュアル側の問題かと思いましたが、挙動を詳しく確認すると、描画方式に起因する現象だと分かりました。自分の環境で挙動を確認しながら、原因と思われる点を整理しました。

レポートの表示倍率を 100% から変更した際に、特定の倍率では文字や線がにじんだようになり、ビジュアル側の解像度が低下したように感じられる場合があります。この現象は、ビジュアルの実装方式に関係なく発生します。

実際に倍率を変えて表示を確認すると、100% のときは鮮明に見えるのに対し、倍率を下げると途端にぼやけることが分かります。ビジュアルを一度選択すると一時的に鮮明になる場合がありますが、ページ全体の倍率が 100% でない限り、再びぼやけた状態に戻ります。

この挙動を観察すると、Power BI Service がページ全体のズーム処理を CSS の transform: scale() を使って行っていることが影響していると考えられます。ズームが iframe の外側に適用されるため、内部描画が早い段階でラスタ画像として固定され、その状態のままブラウザ側で拡大・縮小が行われます。ベクター描画であっても画像のように扱われるため、結果としてぼやけが発生します。この仕組みを踏まえると、現時点で確実に鮮明さを保つ方法は Actual Size（100%）で表示することになります。これが唯一、描画がラスタ化されずに保たれるパスです。

まとめると、ぼやけの原因は CSS transform による外側スケールであり、カスタムビジュアル側の問題ではありません。描画が固定されるタイミングとズーム処理の順序が重なることで、ブラウザが画像として扱ってしまうために起きる現象です。より柔軟なズームを実現するには、描画方式そのものの改善が必要になります。