Safari throws a resizeObserver when sidebar plus content is higher than the viewport

[av3nger]

Flux version

v1.0.29

Livewire version

v3.5.15

What is the problem?

On Safari, when opening up the browser console and resizing the window, I get the following error in the console: ResizeObserver loop completed with undelivered notifications.

Code snippets

I can't seem to isolate the issue. It's some sort of combination of components. If I start removing components from my page, at some point the issue disappears, but it's not related to any single component. Seems like it's related to the number of components.

For example, if I remove the flux:header and flux:sidebar, the issue disappears. But then if I leave those in and remove the footer and main content - the issue also disappears.

How do you expect it to work?

No browser console error

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[joshhanley]

@av3nger thank you for the report! Can you share a code snippet we can copy and paste into our own apps with steps to reproduce. Be sure to include any Blade variable definitions that are used and use a little code as possible to reproduce the issue, so we can investigate?

[av3nger]

This seems to be triggering the error for me. If I remove more, the error is no longer there:

<flux:sidebar stashable sticky class="lg:hidden bg-zinc-50 dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700">
            <flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
            <flux:brand href="{{ url('/') }}" name="{{ config('app.name') }}" class="px-2">
                <x-slot name="logo">
                    <x-application-mark class="w-auto fill-blue-600" />
                </x-slot>
            </flux:brand>

            <flux:navlist variant="outline">
                <flux:navlist.item href="{{ route('home') }}">{{ __('Home') }}</flux:navlist.item>
                <flux:navlist.item href="{{ url('/#features') }}">{{ __('Features') }}</flux:navlist.item>
                <flux:navlist.item href="{{ url('/#download') }}">{{ __('Download') }}</flux:navlist.item>
                <flux:navlist.item href="{{ url('/#pricing') }}">{{ __('Pricing') }}</flux:navlist.item>

                <flux:navlist.group expandable heading="{{ __('Documentation') }}">
                    <s:taxonomy from="categories" sort="order:asc">
                        @foreach ($entries as $entry)
                            <flux:navlist.item href="{{ route('doc.show', ['slug' => $entry->slug]) }}">
                                {{ $entry->title }}
                            </flux:navlist.item>
                        @endforeach
                    </s:taxonomy>
                </flux:navlist.group>
            </flux:navlist>
        </flux:sidebar>

        <flux:table class="mt-20">
            <flux:columns>
                <flux:column><span class="text-white text-lg">{{ __('Feature') }}</span></flux:column>
                <flux:column><span class="text-white text-lg">{{ __('Other CDNs') }}</span></flux:column>
                <flux:column><span class="text-white text-lg">{{ __('MyOwnCDN') }}</span></flux:column>
            </flux:columns>

            <flux:rows>
                <flux:row>
                    <flux:cell><span class="text-white">{{ __('No minimum usage requirements') }}</span></flux:cell>
                    <flux:cell><span class="text-white">{{ __('No') }}</span></flux:cell>
                    <flux:cell variant="strong"><span class="text-white">{{ __('Yes') }}</span></flux:cell>
                </flux:row>

                <flux:row>
                    <flux:cell><span class="text-white">{{ __('Direct provider pricing') }}</span></flux:cell>
                    <flux:cell><span class="text-white">{{ __('No') }}</span></flux:cell>
                    <flux:cell variant="strong"><span class="text-white">{{ __('Lower bulk rates') }}</span></flux:cell>
                </flux:row>

                <flux:row>
                    <flux:cell><span class="text-white">{{ __('Switching providers') }}</span></flux:cell>
                    <flux:cell><span class="text-white">{{ __('No') }}</span></flux:cell>
                    <flux:cell variant="strong"><span class="text-white">{{ __('Full flexibility') }}</span></flux:cell>
                </flux:row>

                <flux:row>
                    <flux:cell><span class="text-white">{{ __('Unified management dashboard') }}</span></flux:cell>
                    <flux:cell><span class="text-white">{{ __('No') }}</span></flux:cell>
                    <flux:cell variant="strong"><span class="text-white">{{ __('Yes') }}</span></flux:cell>
                </flux:row>
            </flux:rows>
        </flux:table>

        <footer class="bg-slate-50 dark:bg-gray-800">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="py-16">
                    <flux:navbar class="mt-10 text-sm flex justify-center" aria-label="quick links">
                        <flux:navbar.item href="{{ route('home') }}">{{ __('Home') }}</flux:navbar.item>
                        <flux:navbar.item href="{{ url('/#features') }}">{{ __('Features') }}</flux:navbar.item>
                        <flux:navbar.item href="{{ url('/#pricing') }}">{{ __('Pricing') }}</flux:navbar.item>
                        <flux:navbar.item href="{{ route('news') }}">{{ __('News') }}</flux:navbar.item>
                        <flux:navbar.item href="{{ route('docs') }}">{{ __('Documentation') }}</flux:navbar.item>
                    </flux:navbar>
                </div>

                <div class="flex flex-col items-center border-t border-slate-400/10 py-10 sm:flex-row-reverse sm:justify-between">
                    <flux:navbar class="mt-10 text-sm flex justify-center" aria-label="quick links">
                        <flux:navbar.item href="{{ url('/terms-of-service') }}">{{ __('Terms of Service') }}</flux:navbar.item>
                        <flux:navbar.item href="{{ url('/privacy-policy') }}">{{ __('Privacy Policy') }}</flux:navbar.item>
                    </flux:navbar>

                    <p class="mt-6 text-sm text-slate-500 dark:text-white/80 sm:mt-0">{{ __('Copyright') }} © <!-- -->2024<!-- --> {{ config('app.name') }}. {{ __('All rights reserved.') }}</p>
                </div>
            </div>
        </footer>

[joshhanley]

@av3nger thanks! I've been able to replicate the issue with the below code. It seems like if the content of the sidebar and the component combine is larger than the vertical viewport size, the sidebar changing at the Tailwind breakpoint triggers the error.

{{ -- layouts/app.blade.php -- }}
<html>
<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @fluxStyles()
</head>
<body class="min-h-screen bg-white dark:bg-zinc-800">
    <flux:sidebar stashable sticky class="lg:hidden bg-zinc-50 dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700">
        <flux:sidebar.toggle class="lg:hidden" icon="x-mark" />

        Sidebar
    </flux:sidebar>

    {{ $slot }}

    @fluxScripts()
</body>
</html>

And this Volt component

<?php

use Livewire\Volt\Component;

new class extends Component {
    //
};
?>

<div>
    Test
</div>

The trick is to make the window really small

And then stretch it out horizontally bigger than the lg Tailwind breakpoint

Then shrink it back down small again