diff --git a/src/components/onboarding/index.tsx b/src/components/onboarding/index.tsx index 97fa817a6f30a6..b345f136925e60 100644 --- a/src/components/onboarding/index.tsx +++ b/src/components/onboarding/index.tsx @@ -320,14 +320,49 @@ export function OnboardingOptionButtons({ {optionDetails[option.id].name} {optionDetails[option.id] && ( - + - - + { + // Explicit mouse enter handling for Firefox compatibility + e.currentTarget.setAttribute('data-state', 'delayed-open'); + }} + onMouseLeave={e => { + // Explicit mouse leave handling for Firefox compatibility + e.currentTarget.removeAttribute('data-state'); + }} + onFocus={e => { + // Ensure keyboard navigation works + e.currentTarget.setAttribute('data-state', 'delayed-open'); + }} + onBlur={e => { + // Ensure keyboard navigation works + e.currentTarget.removeAttribute('data-state'); + }} + > + + + - + {optionDetails[option.id].description} diff --git a/src/components/onboarding/styles.module.scss b/src/components/onboarding/styles.module.scss index ce8823158be2f3..492df11f75e5f0 100644 --- a/src/components/onboarding/styles.module.scss +++ b/src/components/onboarding/styles.module.scss @@ -22,6 +22,18 @@ box-shadow: var(--shadow-6); animation-duration: 100ms; animation-timing-function: ease-in; + /* Firefox-specific fixes */ + z-index: 9999; + position: relative; + pointer-events: none; + + /* Ensure proper rendering in Firefox */ + -moz-user-select: none; + -webkit-user-select: none; + + /* Firefox animation support */ + -moz-animation-duration: 100ms; + -moz-animation-timing-function: ease-in; } .TooltipTitle { @@ -35,15 +47,19 @@ .TooltipContent[data-state='delayed-open'][data-side='top'] { animation-name: slideDownAndFade; + -moz-animation-name: slideDownAndFade; } .TooltipContent[data-state='delayed-open'][data-side='right'] { animation-name: slideLeftAndFade; + -moz-animation-name: slideLeftAndFade; } .TooltipContent[data-state='delayed-open'][data-side='bottom'] { animation-name: slideUpAndFade; + -moz-animation-name: slideUpAndFade; } .TooltipContent[data-state='delayed-open'][data-side='left'] { animation-name: slideRightAndFade; + -moz-animation-name: slideRightAndFade; } .TooltipArrow { @@ -93,3 +109,56 @@ transform: translateX(0); } } + +/* Firefox-specific keyframe animations */ +@-moz-keyframes slideUpAndFade { + from { + opacity: 0; + -moz-transform: translateY(2px); + transform: translateY(2px); + } + to { + opacity: 1; + -moz-transform: translateY(0); + transform: translateY(0); + } +} + +@-moz-keyframes slideRightAndFade { + from { + opacity: 0; + -moz-transform: translateX(-2px); + transform: translateX(-2px); + } + to { + opacity: 1; + -moz-transform: translateX(0); + transform: translateX(0); + } +} + +@-moz-keyframes slideDownAndFade { + from { + opacity: 0; + -moz-transform: translateY(-2px); + transform: translateY(-2px); + } + to { + opacity: 1; + -moz-transform: translateY(0); + transform: translateY(0); + } +} + +@-moz-keyframes slideLeftAndFade { + from { + opacity: 0; + -moz-transform: translateX(2px); + transform: translateX(2px); + } + to { + opacity: 1; + -moz-transform: translateX(0); + transform: translateX(0); + } +}