Tools om het web vast te leggen en te converteren
GrabzIt is een online community

Firefox heeft problemen met posistion

Ik heb een probleem om de screenshot in bepaalde situaties correct te laten werken in Firefox. 

Firefox gebruikt een CSS-eigenschap 'inzet' die geen enkele andere browser gebruikt (https://developer.mozilla.org/en-US/docs/Web/CSS/inset). Het wordt gebruikt in plaats van links / rechts / boven / onder. Althans in mijn versie van FF, dwingt het zelfs om het te gebruiken door een links / rechts / ... CSS te vervangen. GrabzIt herkent deze eigenschap niet en daarom is de afbeelding niet correct voor Firefox-gebruikers. 

Heeft iemand anders dit ervaren en hebben een oplossing.

Gevraagd door Corey Alderin op 18 september 2019

Misschien zet u de CSS-code die kan worden gewijzigd in een extern CSS-bestand en verwijst u het op die manier in uw HTML?

Beantwoord door GrabzIt Support op 18 september 2019

Dat zou in mijn geval niet werken. Ik moet de css inline hebben, want het is niet altijd hetzelfde. Het verandert afhankelijk van de gebruiker. 

Beantwoord door Corey Alderin op 18 september 2019

In mijn versie van FireFox heb ik hiermee getest:

<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>

De geposte gegevens waren deze:

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

Er is geen inzet verzonden.

 

Beantwoord door GrabzIt Support op 18 september 2019

Ik heb dit meer getest en het lijkt erop dat dit gebeurt wanneer de gebruiker een div verplaatst. Met mijn app kunnen elementen worden verplaatst en dat is wanneer Firefox die verandering aanbrengt. Ik kan hier waarschijnlijk enkele wijzigingen in mijn code aanbrengen. 

Beantwoord door Corey Alderin op 18 september 2019