PDF/UAレンダリングでイメージやボックスが灰色になる

更新日:2026年6月9日

Translated

View the article in English

PDFをSaveAsPdfUA()を使用してPDF/UA形式に変換する際には、画像、SVG、シャドウ、およびボックス要素が出力で灰色のシェーディングで表示されます。

ChromiumにはPDF/UAモードでレンダリングオーダーの問題があり、特定の要素が適切に合成されません。灰色の見た目は、PDF/UAモードがアクティブのとき、ブラウザがレイヤード要素を重ねて描画する方法によって引き起こされるレンダリングの副産物です。

解決策

HTML要素に-webkit-filter: blur(0)を追加してください。これにより、Chromiumは新しい合成レイヤーを作成し、ハードウェアアクセラレーションをトリガし、ブラウザが要素の積み重ねオーダーを再評価し、灰色のアーティファクトを取り除きます。

インラインで:

<html style="-webkit-filter: blur(0);">

<html style="-webkit-filter: blur(0);">

HTML

CSS経由で:

html {
    -webkit-filter: blur(0);
}

この問題を解決する最小の要素にフィルターを適用し、<html>要素には適用しないでください。大きな範囲に適用すると、ハードウェアアクセラレーションが強制されるため、一部の低エンドデバイスではパフォーマンスに僅かな影響を及ぼす可能性があり、いくつかのレイアウトではz-indexスタッキングに影響を与えることがあります。この修正を適用した後に積み重ね順が変わった場合は、必要に応じてz-indexの値を調整してください。

Curtis Chau

今すぐエンジニアリングチームとチャット

テクニカルライター

Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。

開発以外にも、CurtisはIoT（Internet of Things）への強い関心を持ち、ハードウェアとソフトウェアの統合方法を模索しています。余暇には、ゲームをしたりDiscordボットを作成したりして、技術に対する愛情と創造性を組み合わせています。

準備はできましたか？

Nuget ダウンロード 20,088,359 | バージョン: 2026.7 リリースされたばかり