Tools to Capture and Convert the Web
GrabzIt's Online Community

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.

Asked by Corey Alderin on the 18th of September 2019

Perhaps put the CSS code that is suceptible to change in a external CSS file and reference it in your HTML that way?

Answered by GrabzIt Support on the 18th of September 2019

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. 

Answered by Corey Alderin on the 18th of September 2019

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.

 

Answered by GrabzIt Support on the 18th of September 2019

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. 

Answered by Corey Alderin on the 18th of September 2019