Table/modal visual bug on validation error with wire:transition

[BartekJan1128]

Flux version

2.10.2

Livewire version

4.0.1

Tailwind version

4.0.0

Browser and Operating System

Edge, Opera on Windows 11

What is the problem?

After submitting a form with a validation error, table rows with wire:transition flash through the modal.

Code snippets to replicate the problem

<?php

use Livewire\Attributes\Layout;
use Livewire\Component;

new #[Layout('layouts::app')]
class extends Component {

    public $data = [
        "A", "B", "C", "D", "E"
    ];

    public $new = "";


    public function add()
    {
        $this->validate([
            "new" => 'string|required|not_in:data'
        ]);
    }

};
?>

<div class="p-2">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6">
        <flux:modal.trigger name="add">
            <flux:button variant="primary" class="w-full sm:w-auto">
                <flux:icon.plus/>
                Add
            </flux:button>
        </flux:modal.trigger>
    </div>

    <flux:table>
        <flux:table.columns>
            <flux:table.column class="pl-2!">A</flux:table.column>
            <flux:table.column>B</flux:table.column>
            <flux:table.column>C</flux:table.column>
            <flux:table.column align="end" class="pr-2!">D</flux:table.column>
        </flux:table.columns>
        <flux:table.rows>
            @foreach ($this->data as $d)
                <flux:table.row class="odd:bg-gray-100" wire:transition :key="$d">
                    <flux:table.cell class="pl-2!">
                        {{$d}}
                    </flux:table.cell>
                    <flux:table.cell variant="strong">....</flux:table.cell>
                    <flux:table.cell variant="strong">...</flux:table.cell>
                    <flux:table.cell align="end" class="pr-2!">
                        <flux:button variant="primary" color="yellow" icon="pencil-square" size="sm"></flux:button>
                    </flux:table.cell>
                </flux:table.row>
            @endforeach
        </flux:table.rows>
    </flux:table>

    <flux:modal name="add" class="sm:w-[50%] max-w-full">
        <form wire:submit="add" class="space-y-6">
            <div>
                <flux:heading size="lg" class="text-gray-900 dark:text-gray-100">New</flux:heading>
            </div>

            <flux:input wire:model="new" label="New" placeholder="..."/>

            <div class="flex justify-end pt-4">
                <flux:button type="submit" icon="plus" variant="primary">
                    Add
                </flux:button>
            </div>
        </form>
    </flux:modal>
</div>

Screenshots/ screen recordings of the problem

Bug.mp4

How do you expect it to work?

Same behavior as without wire:transition

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.

[jeffchown]

@BartekJan1128 I tried your snippet and saw the same issue. I even tried experimenting with z-* values, but they didn't help.

[BartekJan1128]

It also happens when opening the edit modal (not in snippet), so I think it happens on every Livewire request.

[BartekJan1128]

Actually it's happening everywhere with every livewire request, not only Flux components. Should i close this here and report this to livewire repository? Any idea @jeffchown ?

[ganyicz]

Hi @BartekJan1128

thanks for reporting!

Let's keep it here for now,.

I assume this will be related to the <dialog> component Flux uses and will require some changes in Flux.

[joshhanley]

@ganyicz just asked me if I'd seen this. I found this https://stackoverflow.com/questions/79860366/view-transition-appearing-over-dialog-background

It seems the view transition elements are being rendered over the top layer elements (which is what the modal is).

You can fix it by giving your modal an id an adding view transitons to the dialog and dialog backdrop, like this.

    <flux:modal id="test" name="add" class="sm:w-[50%] max-w-full">
        ...
    </flux:modal>
</div>

<style>
#test > dialog {
    view-transition-name: testdialog;
}
#test > dialog::backdrop {
    view-transition-name: testbackdrop;
}
</style>

Now everything works as expected.

I don't think it's an ideal solution though, so let's leave this open for now and see if we can come up with some ideas for how we can fix it in Flux.

[ganyicz]

I've done some more digging, this is the complete CSS we need:

dialog {
    view-transition-name: dialog;
}

dialog::backdrop {
    view-transition-name: backdrop;
}

::view-transition-old(dialog),
::view-transition-old(backdrop) {
    opacity: 0 !important;
    animation: none !important;
}

::view-transition-new(dialog),
::view-transition-new(backdrop) {
    opacity: 1 !important;
    animation: none !important;
}

::view-transition-group(dialog) {
    animation: none !important;
}

This ensures the dialog itself is not animated and is similar to what livewire injects during the transition to prevent the default cross-fade on root element (we also need ::view-transition-group(dialog) to prevent transition of the dialog position, which happens on the group)

export async function transitionDomMutation(fromEl, toEl, callback, options = {}) {
    ...

    let style = document.createElement('style')

    style.textContent = `
        ::view-transition-old(root) {
            animation: none !important;
            opacity: 0 !important;
        }

        ::view-transition-new(root) {
            animation: none !important;
            opacity: 1 !important;
        }
    `

    document.head.appendChild(style)

I think it's best if this css lives in Flux.

I'll do some more testing with other top-layer components and submit a PR.

One quirk I wasn't able to fix is this backdrop flicker, which seems to be a rendering issue in Chrome:

Screen.Recording.2026-01-21.at.14.10.52.mov

I exaggerated this by increasing the opacity, normally it's less noticeable.

[ganyicz]

Recap

• Elements with wire:transition show up on top of top-layer elements.
• This can be easily solved by giving top-layer elements their own view transition.
• But by doing that, we also make them animate, stopping that is difficult:

Update:

1. Good news: I can't replicate the flickering bug today, may have been fixed in Chrome 🤷‍♂️ there was a release the day before
2. Bad news: This also affects popovers - tooltip, dropdown, select, etc. (video below)
3. Bad news: Chrome doesn't seem to support view-transition-class on top-layer elements (explanation below)

Popovers:

Screen.Recording.2026-01-22.at.13.34.15.mov

This is an issue because:
a) popovers are a lot more difficult to target, we might need to add flux-data-popover to all components or target [popover] which might conflict with user-land code
b) we will need to create a transition for every single one that's on the page (may have performance implications?)

view-transition-class:

In yesterday's snippet I had something like this:

[data-flux-modal] > dialog {
    view-transition-name: dialog;
}

::view-transition-group(dialog) {
    animation: none !important;
}

This is wrong because view transition name has to be unique and there can be multiple dialogs on a page.

We can solve this by changing the name to match-element which gives each transition a unique name.

However, we still need to disable the default animation, and we can't use ::view-transition-group(dialog) to target the transition. This is where view-transition-class comes in:

[data-flux-modal] > dialog {
    view-transition-name: match-element;
    view-transition-class: flux-no-transition
}

::view-transition-group(.flux-no-transition) {
    animation: none !important;
}

This solves it in theory.

In practice, the view-transition-class only works on elements that are not in the top-layer.

🤦‍♂️