Ferramentas para capturar e converter a Web
Comunidade Online de GrabzIt

Problemas do Firefox com posição

Faça perguntas sobre como capturar ou converter páginas da Web ou HTML into imagens, documentos CSV, PDF ou DOCX, além de como converter vídeos into GIF animado usando nossa API.

Estou tendo problemas para fazer a captura de tela funcionar corretamente no Firefox em determinadas situações. 

O Firefox usa uma propriedade CSS "inset" que nenhum outro navegador usa (https://developer.mozilla.org/en-US/docs/Web/CSS/inset). É usado em vez de esquerda/direita/superior/inferior. Pelo menos na minha versão do FF, ele até força seu uso, substituindo qualquer CSS esquerdo/direito/.... GrabzIt não reconhece esta propriedade e por isso a imagem não é correta para usuários do Firefox. 

Alguém mais passou por isso e tem uma solução.

Perguntado por Corey Alderin em 18 de setembro de 2019

Talvez colocar o código CSS que pode ser alterado em um arquivo CSS externo e referenciá-lo em seu HTML dessa forma?

Respondido pelo suporte GrabzIt em 18 de setembro de 2019

Isso não funcionaria no meu caso. Preciso ter o css inline porque nem sempre é o mesmo. Ele muda dependendo do usuário. 

Respondido por Corey Alderin em 18 de setembro de 2019

Na minha versão do FireFox testei com isto:

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

Os dados postados foram estes:

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

Não houve inserção enviada.

 

Respondido pelo suporte GrabzIt em 18 de setembro de 2019

Tenho testado mais isso e parece que isso está acontecendo quando o usuário move uma div. Meu aplicativo permite que os elementos sejam movidos e é aí que o Firefox está fazendo essa alteração. Provavelmente posso fazer algumas alterações em meu código para compensar isso. 

Respondido por Corey Alderin em 18 de setembro de 2019