PDFエレメントの表示崩れを即解決！ブラウザ互換性と対策まとめ

2026.01.15

ブラウザ上でPDFをオブジェクトタグやiframeで埋め込むと、意図したレイアウトが崩れたり、画面全体が乱れるケースが頻繁に報告されます。
「PDF表示が崩れる」「ページが横にスクロールする」などユーザーが直面する不具合は、ブラウザ依存のレンダリング挙動や、サーバー側の設定、またはHTML/CSSの干渉が主な原因です。
本記事では、即解決に直結する原因切り分けと対策をまとめますので、実際に発生した表示崩れに悩む開発者の皆様へ最適な解決策をご紹介します。

PDF表示崩れの主な原因

1. MIMEタイプの不一致

PDFを埋め込む際に、サーバーが正しい Content-Type: application/pdf を返さないと、ブラウザがファイルをテキストとして扱いレイアウトが崩れます。
特にApache/NGINXの設定ミスやファイル拡張子の登録忘れが原因です。

2. <object> と <embed> の相性

<object> タグはInternet Explorer系で古い仕様が残っており、data 属性にPDFへのURLを指定した際に <embed> をフォールバックとして扱うことがあります。
複数のタグを使うと、ブラウザごとに異なる描画エンジンが走るため、レイアウトがずれるケースが増えます。

3. CSSによるレイアウト干渉

iframe 内のPDFは親要素の width／height が 100% だと正しく表示されますが、max-width, flex, position: absolute などの CSS が干渉すると、PDF ビューワが正しいサイズにスケーリングできません。

4. ブラウザ固有のPDFビューワ

Chrome, Edge, Safari はそれぞれ独自のPDF Viewer を持っており、描画エンジンが異なります。
例えばChrome は PDF.js を内部で使用しているため、transform を乗せた要素に対してはズレが生じやすいです。

5. CDN／HTTP/2 の圧縮／キャッシュ破棄

PDF を CDN で配信している際、圧縮やキャッシュ破棄が正しく動かないと破損したバイナリが送られ、表示崩れが発生します。

ブラウザ別に見る挙動

ブラウザ 代表的な挙動 解決策
Chrome 100% スケールで正しく表示 transform: none; の付与、object-fit: contain;
Edge 既定のレイアウトに沿って表示 iframe{border:0;} と scrolling="no"
Safari PDF ビューワが外部リンクにフォールバック target="_blank" を使用して別タブで開くか、PDF.js を自前で埋め込む
Firefox CSS Flex で正規表示できない display:inline-block; の指定でブロック化
モバイル クリックでズームが発生 user-scalable=no を metaタグで許可／無効化

具体的な対策

1. サーバー側の MIME 設定を確認する

# Apache (httpd.conf)
AddType application/pdf .pdf

# NGINX (nginx.conf)
types {
    application/pdf pdf;
}

これらの設定を追加し、curl -I https://example.com/file.pdf で Content-Type: application/pdf が返ってくるか確認します。

2. <iframe> に統一する

最も普遍的かつ安定した埋め込み方法は<iframe>です。以下のように border: 0; でボーダーを隠し、scrolling="no" で内部スクロールを防ぎます。

<iframe
  src="https://example.com/file.pdf"
  width="100%"
  height="600"
  style="border:0;"
  scrolling="no"
  title="PDF Viewer">
</iframe>

さらに安全にする

<meta name="viewport" content="width=device-width, initial-scale=1">

これにより、デバイスの幅に応じてPDFが自動的に拡大縮小します。

3. CSS での調整

.pdf-container { /* 親divに設定 */
  width: 100%;
  height: auto;
  overflow: hidden;
}

.pdf-container iframe {
  width: 100%;
  height: 80vh; /* 画面高さの80% */
  border: none;
}
  • overflow: hidden を付与して、iframe 内で余計なスクロールが発生しないようにします。
  • height: 80vh でビューポートに応じた高さを確保。

4. PDF.js を自前で埋め込む

PDF.js をフロントエンドに組み込むと、ブラウザ依存せずにレンダリングできるメリットがあります。公式サンプルをベースにして、必要に応じてサイズやズームを設定します。

<div id="pdf-viewer"></div>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/build/pdf.min.js"></script>
<script>
  const url = 'https://example.com/file.pdf';
  const loadingTask = pdfjsLib.getDocument(url);
  loadingTask.promise.then(function(pdf) {
    const viewer = document.getElementById('pdf-viewer');
    for(let i=1; i<=pdf.numPages; i++){
      pdf.getPage(i).then(page => {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        const viewport = page.getViewport({scale: 1.5});
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        page.render({canvasContext: context, viewport: viewport});
        viewer.appendChild(canvas);
      });
    }
  });
</script>

5. CDN の設定チェック

  • Cache-Control: no-transform を付与し、圧縮途中でバイナリが破損しないようにします。
  • ETag: 変更時にハッシュ化し、古いキャッシュが残らないようにします。
  • HTTPS: HTTP/2 の設定で ALPN を有効にし、圧縮品質を向上させます。

高速化とセキュリティ対策

  • Lazy Load: 初期ロード時に PDF を表示しないようにし、スクロールしてから読み込む Lazy Load を導入。
  • コンテンツセキュリティポリシー（CSP）: default-src 'self'; でドメイン外からの埋め込みを防止。
  • Access-Control-Allow-Origin: 必要に応じて正しく設定し、埋め込み失敗を防ぐ。

テストとチューニング

  1. クロスブラウザテスト
    • BrowserStack, Sauce Labs のようなクロスブラウザテストツールを使用し、主要ブラウザ・デバイスでの表示確認。
  2. 自動化テスト
    • Selenium で PDF へのアクセスと表示領域のサイズ検証をスクリプト化。
  3. パフォーマンス測定
    • Lighthouse を利用し、PDF の読み込み時間とレイアウトシフト値（CLS）を測定し、最適化。

まとめ

PDF エレメントの表示崩れは、MIMEタイプ、タグ選択、CSS干渉、ブラウザ固有のビューワという多角的な要因が絡み合って発生します。
記事で紹介した対策を段階的に実行すれば、ほとんどの表示崩れは即解決できます。

  1. サーバーの MIME 設定を正確に。
  2. <iframe> で統一。
  3. CSS でサイズを制御。
  4. 必要なら PDF.js を導入。
  5. CDN でキャッシュと圧縮を最適化。

最後に、常にクロスブラウザテストを行い、ユーザーが安心して閲覧できるように心掛けてください。実装後は、ログとユーザーのフィードバックを定期的に確認し、必要に応じて微調整を行うことで、継続的に安定した表示体験を提供できます。

コメント