calendar elements render issue on Safari

igor-ukhin commented 8 months ago

Before you start - checklist

[X] I followed instructions in documentation written for my React-Calendar version
[X] I have checked if this bug is not already reported

Description

Hi! I am work with react-calendar (4.6.0) and have issue with rendered elements (decades, years, months). When I open the calendar in a modal window everything looks good (I have the starting display set to decade). But as soon as I click on any calendar button (navigation arrows, tile), the elements disappear from the screen and the calendar stops working. But if you disable any style in the code inspector (even one not associated with the calendar component), everything starts working. Reproduced in Safari only.

https://github.com/wojtekmaj/react-calendar/assets/91734202/16761d7e-5f88-4af2-8c71-a564a726b774

Elements remain in the DOM-tree, but are not displayed on the screen.

Steps to reproduce

Open modal with calendar
Click on any clickable element

Expected behavior

All calendar elements is showing after clicking

Actual behavior

All calendar elements is hiding after clicking

Additional information

No response

Environment

Browser (if applicable): Safari, Version 17.0 (18616.1.27.111.22, 18616)
React-Calendar version: 4.6.0
React version: 17.0.2

wojtekmaj commented 8 months ago

Hey! This doesn't look like something directly related to React-Calendar, but I may have a look if you provide a reproducible example, preferably on CodeSandbox.

igor-ukhin commented 8 months ago

Thank you for your prompt response. The problem really wasn't with the calendar, but with the styles of a completely different component, which confused me a little. I solved the problem, but I still don’t understand how these things are interconnected

wojtekmaj / react-calendar