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

Firefox issues with posistion

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 Wednesday, 18 September, 2019 11:00:32 AM

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 Wednesday, 18 September, 2019 11:22:48 AM

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 Wednesday, 18 September, 2019 12:11:07 PM

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 Wednesday, 18 September, 2019 12:24:10 PM

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 Wednesday, 18 September, 2019 05:01:42 PM