search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.93k stars 1.2k forks source link

Month label "jumping" while changing month on mobile #9736

Open attilavargatelus opened 12 months ago

attilavargatelus commented 12 months ago

Duplicates

Latest version

Steps to reproduce 🕹

Link to live example: https://mui.com/x/react-date-pickers/date-picker/

Steps:

  1. Open the mobile datepicker on a mobile device (Android Chrome browser fe, 114,0.5735.196, Android 11)
  2. Tap on the month changer arrow multiple times

Current behavior 😯

The month label jumping upwards

Expected behavior 🤔

The month label should not jump

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Order ID or Support key 💳 (optional)

No response

alexfauquette commented 12 months ago

There is not distinction between mobile and desktop on this topic. It seems to be more a perf issue than an animation one.

The transition between two moths is done by this element

<PickersFadeTransitionGroupRoot className={clsx(classes.root, className)}>
      <Fade
        appear={false}
        mountOnEnter
        unmountOnExit
        key={transKey}
        timeout={{ appear: animationDuration, enter: animationDuration / 2, exit: 0 }}
      >
        {children}
      </Fade>
    </PickersFadeTransitionGroupRoot>

And the exit: 0 does not mean it's immediately destroyed, because we can stack those months.

I had to be a bit extreme on my computer to reproduce the glitch, my mouse was not fast enough 😁

https://github.com/mui/mui-x/assets/45398769/8e0f18bf-cf6b-4d02-be75-ded50a451b2b

github-actions[bot] commented 11 months ago

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

maiia-kuzmishyna commented 11 months ago

@DanailH, which information is missing on the issue?

github-actions[bot] commented 11 months ago

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

pawelproject commented 6 months ago

I happens for me:

pickermonthjumping