問題タブ [webpage-rendering]

ローカル エンドで Web ページからスクリーンショットを作成するために、phantomjs をテストしています。

これは、ローカルホストでの HTML のレンダリング方法です -出力

しかし、コードから PDF を作成すると、PDF の幅が適切に設定されません。つまり、以下に示すように一部のテキストが切り取られます。

以下は私が疲れたコードです -

これら2つのプロパティも試しましたが、同じ結果が得られました-

ここで私が間違っていることを教えてください。

私が得ている出力-私が得ているpdf画像

と で簡単なクリスタル レポートを作成しようとしていASP.netますC#。CrystalReportViewerレポートを読み込むために使用しています。C# コードは次のとおりです。

問題は私です。ブラウザで報告しCrystalReportViewerません。それは. エラーはありませんが、何が問題なのですか?renderblank page

Retina Macbook Pro の Chrome で開発した Web サイトを閲覧すると、これらの縦線がページに表示されます。私のウェブサイトはクールな視差技術を使用しており、これらの垂直線は背景を透明にするため、その下の背景レイヤーが見えてしまい、煩わしくなります。この背景をオフにしても、線は表示されますが、背景色ではなく白になっているだけです。ウェブサイトはwww.1000days.meで、以下にスクリーンショットを含めました (rMBP を持っていないため、Chrome エミュレーターから)。

それぞれの中にコンテナがあります<section>(背景色が変わるたびに新しい<section>です) が、これらの線はコンテナの境界線の外側にあります。また、確認はできませんが、解像度が違うと線の入り方が違うように見えます。

EDIT：Operaにも表示されます（現在Blinkを使用しているためだと思います）が、Safari、Firefox、またはInternet Explorerには表示されません。

というわけで、大量の画像を載せた横スクロールサイトを作っています。サイト全体で svg を使用する予定でしたが、ページで使用されている中程度から高度の複雑さの 20 ～ 30 個の svg 画像しかなく、Chrome ではすでにジャンクとスクロールの長いペイント時間が表示されているようです (Firefox はさらに悪いです。ただし、サファリの方がはるかに優れているようです）。

タイムラインをスクロール

サイトを表示する(スクロールは Mac でのみ機能し、Windows ユーザーは矢印キーを使用できます)

私の質問は、svgs の代わりに png を使用した場合、ペイント時間が短縮され、ジャンクが減少するかどうかです。ブラウザーが約 20 個の奇妙な SVG 画像で苦労しているのはなぜですか?

私のウェブページの一番上にあるコードの最初の行を実行する前に、なぜそんなに遅れがあるのか​​ を知る必要があります. 次の構造のウェブサイトがあります。PHP ヘッダーのこの echo ステートメントの上に行はありません。私のheader.phpは次のようなものです：

これは私の footer.php です。フッターのエコーの下に行はありません。

明確にするために、Web ページは約 3/100 秒ですばやくレンダリングされます。問題は、PHP で処理を行ったり、何か他のものを出力したりする前の初期ラグです。さて、ヘッダーの上からの行は、0.292453.. または 0.78583.. のようなものをエコーし​​、下の行は、0.29687... または 0.789939.. のようなものをエコーし​​ます。秒。私の質問は、最初はなぜそんなに時間がかかるのですか? 可能な場合、どのように削減できますか？開始時間には、DNS の解決、接続、受信など、Web ページが要求された時間からすべてが含まれますか?

この質問が反対票を投じられた理由を誰か教えてもらえますか? より意味のあるように、質問を言い換えてみます。

Angular.js を使用して簡単な Web ページを作成しています。ブラウザー (Chrome) で Web ページを開くと、ページは以下のような raw angular 表現でレンダリングされます。

ページをリロードすると (場合によっては 2 ～ 3 回)、Angular 式が評価され、以下のように適切にレンダリングされます。

2 つのシナリオのいずれかが発生する特定のパターンはありません。考えられる理由は何ですか？

コントローラーファイル

index.js ファイル

htmlファイル

ページにリーフレット マップを表示すると、奇妙な動作が発生します。通常、マップは期待どおりにレンダリングされ、うまく機能します。ただし、JavaScriptで検出したフォームでエラーが発生した場合にのみマップを表示したい。そのため、親を設定し<div id="map">てdisplay: none;後で必要に応じて表示すると、タイルが読み込まれず (または部分的にのみ読み込まれて続行されない)、マップが奇妙に「ずれ」ます (js で定義されているように中央に配置されません)。

display: none;私の考えでは、ブラウザが親内の要素をレンダリングしないのではないでしょうか?

$(document).ready(...)関数でマップを非表示にしてみましたが、違いはありませんでした。マップを非表示にして表示するとすぐに、同じ動作が繰り返されます。これを Firefox 44.0 と Chromium 48.0 でテストしましたが、動作は一貫しています。

どんなヒントでも役に立ちます。これは、リモートで読み込まれた要素 (ajax) の一般的な動作ですか?

編集1：

これで解決策と回避策がわかりました (以下の回答を参照してください) が、これがリモートで読み込まれた要素のグローバルな動作であるかどうかはまだわかりません。説明をありがとう。

編集2：

説明については、受け入れられた回答を参照してください。