Colliding with html function returns false through its colliding

I am making a chrome extension which puts an emoji shmeji into your site.
When i made a function that checks if X,Y position is colliding with element,
It only returns false.
But its actually colliding with some of HTML elements.
How can i fix it?
Heres my code:

var emoji = document.createElement('span');
// ...
var hold = false;
var emojix = Math.round(window.innerWidth / 2);
var emojiy = Math.round(window.innerHeight / 2);
var emojively = 0;
var emojivelx = 0;
var emojis = ["😃","😄","😉","😊","☺","😎","😢","😱","😖", "🙂", "🙂", "🙂", "🙂", "🙂"];
var skip = false
// ...
function htmlcol(x, y) {
  var elements = document.querySelectorAll('body *'); // Get all elements within the body

  for (var i = 0; i < elements.length; i++) {
    var rect = elements[i].getBoundingClientRect(); // Get the boundaries of the element
    if (
      x >= rect.left &&
      x <= rect.right &&
      y >= rect.top &&
      y <= rect.bottom
    ) {
      return true
      break
    } else {
      return false}
  }
}
function update() {
  // ...
  if (chckycol(emojiy) || htmlcol(emojix, emojiy)) {
    emojively = 0;
  } else {
    if (!hold) {
      emojively += 0.07;
    } else {
      emojively = 0;
    }
  }
  // ...
}
// ...
updates = setInterval(update,10);