Firefox issues with posistion
Ask questions on how to capture or convert web pages or HTML into images, CSV, PDF or DOCX documents as well on how to convert videos into animated GIF's using our API.
I am having an issue getting the screenshot to work correctly on Firefox in certain situations.
Firefox uses an "inset" CSS property that no other browser uses (https://developer.mozilla.org/en-US/docs/Web/CSS/inset). It's used instead of left/right/top/bottom. At least in my version of FF, it even forces it to be used by replacing any left/right/... CSS. GrabzIt does not recognize this property and so the image is not correct for Firefox users.
Has anyone else experienced this and have a solution.
Perhaps put the CSS code that is suceptible to change in a external CSS file and reference it in your HTML that way?
That wouldn't work in my case. I need to have the css inline because it's not always the same. It changes depending on the user.
In my version of FireFox I tested with this:
<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>
The posted data was this:
<style>
div{
top:1em;
left:1em;
position:absolute;
}
</style>
<div>Hello</div>
There was no inset sent.
I have been testing this more and it appears that this is happening when the user moves a div. My app allows elements to be moved around and that is when Firefox is making that change. I can probably make some changes to my code to account for this.