useCalendarCell and CSS zoom

[raczorsi97]

Hi there,

I am using useCalendar, useCalendarGrid and useCalendarCell hooks for my Calendar, and I discovered an unusual behavior.

When zoom CSS property is applied to the body of the page, or to any parent element of the Calendar, the Calendar cells can't be selected anymore via mouse click. However the keyboard navigation is still working, a date can be reached by arrow naviagtion and selected via Enter.

This can be easily reproduced here: https://react-spectrum.adobe.com/react-aria/useCalendar.html#usecalendarcell by adding zoom: 1.5 (or any value) to the body or to the parent div of the Calendar.

Can this be fixed ?

[reidbarber]

Maybe related: #6431

I'm not sure what the use case for applying zoom to the body of the web page is since browsers include their own methods for zooming.

[raczorsi97]

body was offered only as an example to reproduce the issue.

In my case the zoom is used on a section of the page which contains a collapsible header and a container with a Table, our Calendar and other elements. When the header is expanded the elements inside the container are on normal size, when the header is collapsed zoom: 0.75 is applied to the container, so more elements will be visible in the page. Unfortunately this making the Calendar dates unselectable.

CSS zoom is applied only to the container, not to affect other items on the page (like navbar and sidebar), so the browsers integrated zoom CTRL +- is not an option.