Webをキャプチャして変換するツール
GrabzItのオンラインコミュニティ

Firefox の位置に関する問題

WebページまたはHTMLをキャプチャまたは変換する方法について質問する into画像、CSV、PDF、またはDOCXドキュメント、およびビデオの変換方法 intoアニメーションGIFはAPIを使用しています。

特定の状況において、Firefox でスクリーンショットを正しく動作させることができないという問題が発生しています。 

Firefox は、他のブラウザが使用しない「inset」CSS プロパティを使用します (https://developer.mozilla.org/en-US/docs/Web/CSS/inset)。 左/右/上/下の代わりに使用されます。 少なくとも私のバージョンの FF では、左/右/... CSS を置き換えることによって強制的に使用することさえできます。 GrabzIt はこのプロパティを認識しないため、Firefox ユーザーにとって画像は正しくありません。 

他にこれを経験した人がいて、解決策を持っている人はいますか。

18 年 2019 月 XNUMX 日にコーリー・オルデリン氏からの質問

おそらく、変更される可能性のある CSS コードを外部 CSS ファイルに配置し、それを HTML 内で参照することになるでしょうか?

18 年 2019 月 XNUMX 日に GrabzIt サポートが回答

私の場合はそれはうまくいきません。 CSS は常に同じとは限らないため、インラインで使用する必要があります。 使う人によって変わります。 

18 年 2019 月 XNUMX 日に Corey Alderin が回答

私のバージョンの FireFox では、次のようにテストしました。

<html>
<head>
<script src="grabzit.min.js"></script>
</head>
<body>
<div id="screenshot"><style>
div{
top:1em;
left:1em;
position:absolute;
}
</style>
<div>Hello</div></div>
<script>GrabzIt("APPLICATION KEY").ConvertHTML(document.getElementById('screenshot').innerHTML,{"target": "#captureThis",
"format": "png",
"transparent": 1,
"bwidth": 1200,
"bheight": 1000,
"hd": 1,
"width": 1200,
"height": 1000,
"hide": ".modal-backdrop",
"displayid": "finalImage"}).DataURI();
</script>
</body>
</html>

投稿されたデータは次のとおりです。

<style>
div{
top:1em;
left:1em;
position:absolute;
}
</style>
<div>Hello</div>

インセットは送信されませんでした。

 

18 年 2019 月 XNUMX 日に GrabzIt サポートが回答

これをさらにテストしたところ、ユーザーが div を移動したときにこれが発生しているようです。 私のアプリでは要素を移動できるので、Firefox がその変更を加えているのです。 おそらく、これを考慮してコードにいくつかの変更を加えることができます。 

18 年 2019 月 XNUMX 日に Corey Alderin が回答