Issue with window innerHeight on Arc Browser (Chromium-based)

Question

I'm having a problem with Arc browser where this is not an issue on other browsers (tested on Chrome, Safari, Edge, and Arc browser on iPhone - surprisingly it works). So on default, the divs that have the class "anim" automatically add "hidden" if the viewport isn't seeing the div yet.

When it does, class "hidden" should be replaced with "visible" but Arc seems to not detect any of those "anim" divs and all are kept "hidden". You can test and see the development site on https://intentio-new-site.pages.dev

The relevant code:

function handleScroll() {
      const windowHeight = window.innerHeight;

      animDivs.forEach((animDiv) => {
        const animDivRect = animDiv.getBoundingClientRect();
        const animDivTop = animDivRect.top;
        const animDivBottom = animDivRect.bottom;

        if (animDivTop < windowHeight / 1.2 && animDivBottom > 0) {
          animDiv.classList.add('visible');
          animDiv.classList.remove('hidden');
        } else if (animDivBottom < 0) {
          animDiv.classList.add('visible');
          animDiv.classList.remove('hidden');
        } else {
          animDiv.classList.remove('visible');
          animDiv.classList.add('hidden');
        }
   });
}

<!-- HTML Example -->

<div class="definition anim">
  <!-- Content goes here -->
</div>

Any ideas on how to fix this? I'm hoping it's something I can fix in my code and not Arc browser's functionality or some kind.

Answer 1

Okay my bad, so apparently it's because of this Chrome extension (https://chrome.google.com/webstore/detail/dark-mode-dark-reader-for/pjbgfifennfhnbkhoidkdchbflppjncb).