Headless UI Dialog Transition Causes Background Flickering

[owarleysouza]

Description

The bug occurs within a dialog component. Utilizing the Headless transition component to animate the dialog's transition, when the dialog is opened, the background around it flickers while moving the mouse or scrolling. The current structure follows the below model, and it's been identified that the HeadlessTransitionChild, which is the parent of the HeadlessDialogPanel, is causing this unwanted effect.

Code Structure

<HeadlessTransitionRoot as="template" :show="displayDialog">
  <HeadlessTransitionChild as="template" enter="ease-out duration-300" ...>
    <div class="fixed inset-0 hidden bg-gray-500 bg-opacity-75 transition-opacity md:block" />
  </HeadlessTransitionChild>

  <div class="fixed inset-0 z-10 backdrop-brightness-50 overflow-y-auto">
    <div class="flex min-h-full items-stretch justify-center md:items-center md:p-8">
      <HeadlessTransitionChild as="template" enter="ease-out duration-300" ...>
        <HeadlessDialogPanel class="flex w-full md:max-w-[796px] md:max-h-[700px] transform transition shadow-lg">
          <!--Dialog Content -->
        </HeadlessDialogPanel>
      </HeadlessTransitionChild>
    </div>
  </div>
</HeadlessTransitionRoot>

Problem Detail

This issue is concerning the unexpected behavior occurring when using the Headless UI transition component within a dialog. Specifically, when the dialog is opened, the background flickers when interacting with the mouse or scrolling. The issue seems to be stemming from the HeadlessTransitionChild component, which affects the background behavior.

Additional Information:

• nuxt-headlessui Version: 1.1.4
• Nuxt.js Version: 3.1.0
• Google Chrome Version: 119.0.6045.199

Problem Visualization

low-animation-dialog-bug.mp4

[canderis]

I haven't had this issue with Headless UI, but with other modals.
Check what props are being passed into your modal. You might need to memoize a callback or some state. That's been the cause in my experience.