Skip to content

Conversation

@mateussp97
Copy link

Description

This PR fixes a visual bug where the Dialog component briefly flashes in the top-left corner before animating to its centered position. The issue is visible on the documentation site at https://www.tremor.so/docs/ui/dialog.

The root cause was that the dialogContentShow animation keyframes included positioning transforms translate(-50%, -50%) which conflicted with the Tailwind positioning classes already applied to the component (-translate-x-1/2 -translate-y-1/2). This caused a brief render frame where transforms were not correctly applied.

The fix removes the positioning transforms from the animation, letting Tailwind handle the centering while the animation only handles opacity and scale effects.

Related issue(s)

Related to #152 - This fix addresses dialog positioning issues

What kind of change does this PR introduce? (check at least one)

  • Bug fix (non-breaking change which fixes an issue)
  • New Feature (non-breaking change which adds functionality)
  • New Feature (BREAKING CHANGE which adds functionality)
  • Refactor
  • Build-related changes
  • Other, please describe:

Does this PR introduce a breaking change? (check one)

  • Yes
  • No

How has this been tested?

  • Tested locally by running the development server and verifying all Dialog examples work correctly
  • Verified the animation no longer causes position flash
  • Tested with CPU throttling (4x slowdown) in Chrome DevTools to ensure smooth animation even on slower devices
  • Confirmed Dialog still animates with fade and scale effects as intended

Screenshots (if appropriate):

Before: Dialog flashes in top-left corner before centering
After: Dialog animates smoothly from center position with only opacity/scale changes

The PR fulfils these requirements:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant