Problemi di Firefox con la posizione
Poni domande su come acquisire o convertire pagine Web o HTML into immagini, documenti CSV, PDF o DOCX nonché su come convertire i video into GIF animate che utilizzano la nostra API.
Ho un problema nel far funzionare correttamente lo screenshot su Firefox in determinate situazioni.
Firefox utilizza una proprietà CSS "inset" che nessun altro browser utilizza (https://developer.mozilla.org/en-US/docs/Web/CSS/inset). Viene utilizzato al posto di sinistra/destra/alto/basso. Almeno nella mia versione di FF, ne forza persino l'uso sostituendo qualsiasi CSS sinistro/destro/.... GrabzIt non riconosce questa proprietà e quindi l'immagine non è corretta per gli utenti di Firefox.
Qualcun altro ha sperimentato questo e ha una soluzione.
Forse inserisci il codice CSS che è suscettibile di modifica in un file CSS esterno e fai riferimento ad esso nel tuo HTML in questo modo?
Non funzionerebbe nel mio caso. Ho bisogno di avere il CSS in linea perché non è sempre lo stesso. Cambia a seconda dell'utente.
Nella mia versione di FireFox ho provato con questo:
<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>
I dati postati erano questi:
<style>
div{
top:1em;
left:1em;
position:absolute;
}
</style>
<div>Hello</div>
Non è stato inviato alcun inserto.
L'ho testato di più e sembra che ciò accada quando l'utente sposta un div. La mia app consente di spostare gli elementi ed è allora che Firefox apporta tale modifica. Probabilmente posso apportare alcune modifiche al mio codice per tenere conto di ciò.