Safari/iOS: hover background when unselecting a day

[jasondainter]

Description

When selecting the day of the month, then unselecting in a mobile browser (tested in chrome on IOS) it goes from

Selected...

To Unselected (pressing the date again)

But as you can see (this was tested via the demo on https://react-day-picker.js.org/start directly) you get this blue highlight remaining

This is quite confusing UX as you would expect no selection at all (it looks like it is still selected when it isnt)

Seems fine on Desktop.

Is there any way to turn that off?

Expected Behavior

Expect the lighter blue circle to dissapear

Actual Behavior

Lighter blue circle remains after clearing selection.

Steps to Reproduce

1. Step one - https://react-day-picker.js.org/start
2. Step two - Press a date on mobile (ios/chrome)
3. Step three - Unpress a date (unselect)

Your Environment

• React version: 18.2.0
• Browser [e.g. chrome, safari]: Chrome
• Version [e.g. 22]: Chrome 122
• Operating System [e.g. iOS, Windows]: iOS 17.3

[gpbl]

@jasondainter I see it. It looks like Safari is keeping the :hover style. It seems to be an issue for other people too: https://stackoverflow.com/questions/47802530.

[gpbl]

Looks like the fix is to include the over style inside @media (hover: hover) {.

[jasondainter]

Thanks for quick feedback. in the end I disabled the hover entirely. In my case todays date is highlighted (selected) when the user sees the calendar so I probably get away with this more (eg its more obvious the user has to click a date). would be great to have this fixed in a future version if doable!