Firefox-Probleme mit der Position
Stellen Sie Fragen zum Erfassen oder Konvertieren von Webseiten oder HTML into Bilder, CSV-, PDF- oder DOCX-Dokumente sowie Informationen zum Konvertieren von Videos into animierte GIFs mit unserer API.
Ich habe in bestimmten Situationen ein Problem damit, dass der Screenshot in Firefox korrekt funktioniert.
Firefox verwendet eine „inset“-CSS-Eigenschaft, die kein anderer Browser verwendet (https://developer.mozilla.org/en-US/docs/Web/CSS/inset). Es wird anstelle von links/rechts/oben/unten verwendet. Zumindest in meiner Version von FF erzwingt es sogar die Verwendung durch Ersetzen von Links/Rechts/... CSS. GrabzIt erkennt diese Eigenschaft nicht und daher ist das Bild für Firefox-Benutzer nicht korrekt.
Hat das noch jemand erlebt und eine Lösung parat?
Platzieren Sie den CSS-Code, der sich ändern kann, vielleicht in einer externen CSS-Datei und referenzieren Sie ihn auf diese Weise in Ihrem HTML-Code?
Das würde in meinem Fall nicht funktionieren. Ich muss das CSS inline haben, weil es nicht immer dasselbe ist. Es ändert sich je nach Benutzer.
In meiner Version von Firefox habe ich Folgendes getestet:
<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>
Die veröffentlichten Daten waren folgende:
<style>
div{
top:1em;
left:1em;
position:absolute;
}
</style>
<div>Hello</div>
Es wurde kein Beipack gesendet.
Ich habe dies ausführlicher getestet und es scheint, dass dies passiert, wenn der Benutzer ein Div verschiebt. In meiner App können Elemente verschoben werden, und dann nimmt Firefox diese Änderung vor. Ich kann wahrscheinlich einige Änderungen an meinem Code vornehmen, um dies zu berücksichtigen.