[BUG] - Ripple effect misaligned in RTL layouts #5858
Description
HeroUI Version
2.8.5
Describe the bug
Description
When using Hero UI components that include a ripple effect (such as Button or other clickable elements) inside an RTL (dir="rtl") layout, the ripple animation behaves incorrectly.
Instead of expanding radially from the exact click position, the ripple appears only vertically (top-to-bottom) from the center of the element.
Additionally:
- Clicking near the left or right edges of the component does not trigger a proper horizontal ripple.
- The animation always originates from the vertical center, ignoring the horizontal click position.
Your Example Website or App
No response
Steps to Reproduce the Bug or Issue
Steps to Reproduce
- Set your website’s direction to RTL:
<html dir="rtl">
- Render a Hero UI component with ripple enabled, for example:
<Button ripple>Click Me</Button>
- Click on different horizontal positions (center, left edge, right edge) of the button.
- Observe that the ripple animation only expands vertically from the center.
Expected behavior
Expected Behavior
The ripple should expand uniformly in all directions from the actual click point — just as it does in LTR (left-to-right) layouts.
Possible Cause
The ripple’s position or animation offset might not correctly account for the dir="rtl" property. It’s likely that the horizontal coordinates are being calculated assuming an LTR layout.
Additional Context
You can visually confirm the issue by toggling between LTR and RTL layouts.
In LTR, the ripple behaves as expected, while in RTL, it’s misaligned and only expands vertically.
Screenshots or Videos
No response
Operating System Version
windows
Browser
Chrome