bug: datetime, showing calendar body after intersection observer callback causes issues on safari

[elbugs]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Animations are choppy, feels like need more frames. (Have seen it opening a date time and action sheet menu

)

Expected Behavior

It should open smooth, without lag, without choppy frames. Like in material design, or google chrome:

Steps to Reproduce

Just install the blank starter project, add a ionic date-time for exampl.
Open in Safari with ios theme and click to open the modal. Be aware of the choppy frames at the end of the animation and the lag at showing the days of the month.

All of this issues do not happen in Chrome, neither with md or ios theme or Android device.
Also, does not happen with Safari with md theme.

Code Reproduction URL

https://github.com/gpiccon/ionic_playground

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 6.0.1

Capacitor:

Capacitor CLI : 3.3.4
@capacitor/android : 3.3.4 (/Users/jordipicon/node_modules/@capacitor/android)
@capacitor/core : 3.3.4
@capacitor/ios : 3.3.4 (/Users/jordipicon/node_modules/@capacitor/ios)

Utility:

cordova-res : 0.15.4
native-run : 1.5.0

System:

NodeJS : v16.13.1 (/usr/local/bin/node)
npm : 8.1.2
OS : macOS Monterey

Additional Information

Note: Can't reproduce with Angular framework.

[liamdebeasi]

Thanks for the issue. There appear to be two reported problems:

1. The entering animation in iOS mode on Safari has poor performance.
2. There is a delay in showing the body of the calendar picker in iOS mode on Safari.

Did I understand the issue correctly? I can reproduce issue 2, but I cannot reproduce issue 1. What device are you testing on to get issue 1 to reproduce?

[elbugs]

Hello. Yes, you are right.
Issue 1 happens on iPad and iOS when I compile using capacitor, MacBook Pro M1 with Safari and narrow screen... Everywhere. How can I help?

EDIT: I record a video, maybe it helps: https://vimeo.com/664362198/c7125e4af1

[liamdebeasi]

Thanks! I think the jump you are seeing in Safari is related to the repaint that happens when we show the calendar body. This behavior was added to workaround another issue, but I think we can improve on this: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/datetime/datetime.tsx#L867-L876

My current thinking is that by removing this additional repaint the animation jump in Safari will disappear as well.

[elbugs]

Thanks! I do not think that's the problem, well maybe it's part of it. Why?
Because with the ActionSheet animation happens the same behaviour :/

[liamdebeasi]

What version of Safari are you testing this on? It might be a matter of device performance or a Safari bug.

[elbugs]

I'm on Safari 15.1 (17612.2.9.1.20) in Mac OS Monterey 12.0.1 (21A559). I don't think so because in the iPhone when compiled with capacitor happens the same... That's the big problem here, the iOS performance, I can't ship the app with that performance. (Still work to do for about 5 months, but we have to find the way to solve it) I post this in the forums and had no reply, it's strange to me that nobody has the same bad performance, so maybe it's something from my side... I don't know what as it happens with a blank template. I'm open to work and help you in whatever you need to improve ionic even more, despite this issues I'm fall in love with it. Congrats and keep up the good work!!

[liamdebeasi]

Are you able to help me better understand how to reproduce the performance issue? I cannot reproduce it on my end, and I am unable to see any animation jumping in the video in #24542 (comment).

[elbugs]

It's like all the animations in general at the end of the animation breaks too hard, so that's why it does not look smooth. I can record a video, but the FPS are not helping to show the issue... :/

[elbugs]

Okay, here is a comparative between native Objetive-c action sheet, and ionic6 with react.
Look at the end of the animation, you will see a little jump.

Thats what is happening with iOS theme. If I compile the app forcing the MD design, everything runs smooth.

https://vimeo.com/664717008/a6bf5a9b50

[elbugs]

Hello. Are you able to see the performance issue now? Is there anything else I can help with? Thanks 🙂

[andrerds]

I'm on Safari 15.1 (17612.2.9.1.20) in Mac OS Monterey 12.0.1 (21A559). I don't think so because in the iPhone when compiled with capacitor happens the same... That's the big problem here, the iOS performance, I can't ship the app with that performance. (Still work to do for about 5 months, but we have to find the way to solve it) I post this in the forums and had no reply, it's strange to me that nobody has the same bad performance, so maybe it's something from my side... I don't know what as it happens with a blank template. I'm open to work and help you in whatever you need to improve ionic even more, despite this issues I'm fall in love with it. Congrats and keep up the good work!!

Hey man, how are you?
I'm having the same problem, apart from that there are some strange behaviors using the time, sometimes it selects it right, sometimes it has the time zeroed out of the performance that was shown there.
I had to resort to other date pickers, until this date time was better.

I liked it a lot, but with these gaps and delays it was really bad.
Thanks man, you're not alone.

[liamdebeasi]

I finally found the issue with the animations. Applying an easing to the overall animation effect (like Ionic does) does not produce the same visual results as applying an easing to the first of two keyframes. While effect and keyframes animations are different, both should produce the same visual results in the case of an animation with 2 keyframes.

I reported this to Apple (https://bugs.webkit.org/show_bug.cgi?id=241020) and will look into a possible workaround in Ionic.

[liamdebeasi]

This issue is dedicated to an issue in datetime and is unrelated to the animation issues being reported on this thread. As a result, I created #25369 which will track updates on the animation issue.

When the datetime issue is resolved, this thread will be closed out. Please follow the linked thread for updates on the animation issue.

[elbugs]

Hey Liam, one quick question, why this is not happening with Angular and how is it possible that no one has detect this before? Looks weird to me that we are in version 6 of ionic with this issue that seems stupid, but affects the overall look of the apps, making a sensation of not a native app. Thanks.

EDIT: Also, looking at bugzilla seems that Apple is not considering this something important, from their last comment of 12 days ago...

[liamdebeasi]

If this is an important bug for you, I recommend posting on the WebKit issue thread with a link to an app of yours running in production that displays this issue. Apple needs to understand impact in order to prioritize issues. Just because they did not fix the issue immediately does not mean they do not consider it to be important -- they may just not have a good understand of impact quite yet.

[elbugs]

I know it is a bug from WebKit but my question is, why this is. It happening with angular for example? Or in Inter words, all the apps made with ionic and react are facing this issue and from ionic aren't offering any solution? I consider that a workaround from your side or at least a guide on how to solve it would be helpful. In the end it's the image of ionic.

[capc0]

has there been any update on this? explicitly the delayed animation for the datetime picker.

[liamdebeasi]

Updates on the animation issue are being tracked in #25369.

[hedinasr]

any news or a workaround on this issue ?

[liamdebeasi]

Hi everyone,

Here is a dev build with a proposed fix: 7.8.1-dev.11710449785.14ebd5a0. This patch should resolve the original issue where the calendar body does not show until the modal animation finishes on iOS.

[liamdebeasi]

Thanks for the issue. This has been resolved via #29163, and a fix will be available in an upcoming release of Ionic Framework. Please feel free to continue testing the dev build, and let me know if you have any questions.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.