Text-decoration, hover and transition on Accordion on Safari not working

[georgibakken]

Bug report

Current Behavior

Using text-decoration, hover and transition with Safari does not work as intended on the accordion, and the hover effect seems to be triggered when the item is not hovered.

Note that the background-color can update on hover as expected.

Screen.Recording.2024-06-13.at.10.44.04.mov

Removing

text-decoration: underline;
text-decoration-color: transparent;

from .AccordionTrigger and adding text-decoration: underline; to .AccordionTrigger:hover makes the hover work, however for the transition to work, I need to have them defined in .AccordionTrigger.

Expected behavior

Screen recording of the expected behaviour, on Chrome

Screen.Recording.2024-06-13.at.10.47.33.mov

Here is a simple html/css code example to show that text-decoration, transition and hover works with Safari

Reproducible example

CodeSandbox Template

Suggested solution

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	radix-ui/react-accordion	1.1.2
React	n/a	18.2.0
Browser	Safari	Version 17.5
Assistive tech
Node	n/a	v22.2.0
npm/yarn	pnpm	8.9.0
Operating System	macOS	14.5 (23F79)

[vladmoroz]

This is a bug with <button> styling in Safari and has nothing to do with the Accordion component itself

[georgibakken]

Thanks for looking at it. Do you have any reference to this bug so I know where to look ?

[vladmoroz]

No idea, I just swapped p for button in your basic example to confirm it's a browser bug