getBoundingClientRect().left com Valores Diferentes em Eventos Diferentes

Front-end JavaScript
#1

Bom dia.

Não consegui encontrar o motivo pelo qual se tento pegar a propriedade left de um botão, através do getBoundingClientRect(), sem estar dentro de um evento scroll ou resize, o posicionamento fica no meio deste botão, mas se pego esta mesma propriedade dentro de um resize ou scroll do window, a posição fica correta.

PS:

  1. os valores de altura e largura do botão são definidos antes de chamar o método do título;
  2. não tem margem, nem padding;
  3. tendo ou não, margem, padding, altura e largura, não há uma mudança nestas medidas do botão ou de qualquer outro elemento quando está dentro de um evento scroll ou resize para quando está fora de um destes eventos;
  4. dentro dos eventos, o posicionamento é correto, fora, é errado;
  5. seja a propriedade left ou top, ao estar fora dos dois eventos mencionados, sempre tem um tamanho a mais, ficando mais para a direita ou mais para baixo, quando está fora dos dois eventos;
  6. tentei dezenas de tentativas e erros a retirar outras medidas das propriedades left e top sem sucesso.
#2

voce ja leu isso?

(https://developer.mozilla.org/pt-BR/docs/Web/API/Element/getBoundingClientRect)

ele explica algumas situaçoes em que o retorno pode mudar. da uma olhada.

#3

Certo, mas não entendi o que devo tirar da medida, quando pego esta propriedade fora de um evento scroll e resize, pois quando é fora deste dois eventos, é adicionado algo que pra mim não deveria, ficando a posição quase no meio de um botão usado para a referência de uma modal/popup/etc.

#4

pelo que entendi se o botao nao tiver os valores preenchidos o metodo vai retornar o border box da div primeira div que for definida. ou seja. pode ser que voce nao estaja definindo os valores iniciais, dai ele mostra no local errado. assim eu entendi

#5
  1. os valores de altura e largura do botão são definidos antes de chamar o método do título;
  2. não tem margem, nem padding;
  3. tendo ou não, margem, padding, altura e largura, não há uma mudança nestas medidas do botão ou de qualquer outro elemento quando está dentro de um evento scroll ou resize para quando está fora de um destes eventos;
  4. dentro dos eventos, o posicionamento é correto, fora, é errado;
  5. seja a propriedade left ou top, ao estar fora dos dois eventos mencionados, sempre tem um tamanho a mais, ficando mais para a direita ou mais para baixo, quando está fora dos dois eventos;
  6. tentei dezenas de tentativas e erros a retirar outras medidas das propriedades left e top sem sucesso.
#6

functionCreatePopUp.js (2,3,KB)

#7

Boa noite.
Bom, todos eles têm height e width definidos.
Os botões, por enquanto, são elementos i e preenchidos com imagens SVG. Um problema ocorreu com estas imagens, ao acessar o site pelo meu celular Android, no qual, de 23 imagens, umas 10 não aparecem, diferente do Chrome do PC, mesmo em modo simulação de celular, todas imagens sempre aparecem. Pode ter alguma ligação com isto.

#8

usa max-width e max-height se nao voce tera que usar media queries para poder controlar o tamanho das imagens