My tooltip isn't working on android as getBoundingClientRect is returning 0

I'm implementing a tooltip feature on my page and encountered a specific issue on Android devices. While the tooltips work perfectly on desktop, iOS, and even in resized browser windows, they behave incorrectly on Android.

When pressing on '?' (in repl or code below) positioned near the right edge of the screen on Android, the tooltip extends offscreen instead of properly positioning itself. This behaviour is unique to Android - I can't reproduce it on any other platform as only there rec.right is zero.

I tried it on all other platforms and it seems fine. I added some logs for rect.right which always seems 0 on Android.

Does anybody spot the problem?

<script>    let name = 'world';    import { onMount } from 'svelte';    let amount = 50    function adjustTooltipPosition(event) {        // Get the specific tooltip related to this hover event        const group = event?.currentTarget || event;        const tooltip = group.querySelector('.pointer-events-none');        if (!tooltip) return;        tooltip.style.opacity = '0';        // Reset position first        tooltip.style.left = '50%';        tooltip.style.right = 'auto';        tooltip.style.transform = 'translateX(-50%)';        // wait for animation?        // Get tooltip position after reset        const rect = tooltip.getBoundingClientRect();        const viewportWidth = window.innerWidth;        // If tooltip extends beyond right edge        if (rect.right > viewportWidth - 10) {            tooltip.style.left = 'auto';            tooltip.style.right = '0';            tooltip.style.transform = 'none';        }        // If tooltip extends beyond left edge        if (rect.left < 10) {            tooltip.style.left = '0';            tooltip.style.right = 'auto';            tooltip.style.transform = 'none';        }        tooltip.style.opacity = '1';        // tooltip.classList.add("flex");        // tooltip.classList.remove("hidden");    }       // could also use on:pointerenter={adjustTooltipPosition}     onMount(() => {        const groups = document.querySelectorAll('.group');        groups.forEach((group) => {            group.addEventListener('pointerenter', adjustTooltipPosition);        });        return () => {            groups.forEach((group) => {                group.removeEventListener('pointerenter', adjustTooltipPosition);            });        };    });</script><svelte:head><script src="https://cdn.tailwindcss.com"></script></svelte:head><div class="container h-screen"><div class="my-8 flex w-full flex-grow flex-wrap gap-10">    {#each {length: amount} as _, i}<div class="flex flex-col"><div class="flex items-center gap-1"><span>Something</span><div class="group relative cursor-help">                    ?<!-- https://tailwindcss.com/docs/hover-focus-and-other-states#group-hover --><div                        class="tooltip-content pointer-events-none absolute bottom-full mb-2 hidden w-64 rounded bg-slate-700 px-3 py-2 text-sm text-white group-hover:block">                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div></div></div></div>    {/each}</div></div><style>    .tooltip-content {        width: 16rem;        max-width: calc(100vw - 20px);    }</style>

Playground (you have to add a space in the editor to load tailwind)