bug: datetime intersection observer does not fire when page is zoomed

[adeprez]

Prequisites

• 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

I am playing with the new ion-datetime component from the ionic v6 beta.

Using the < and > buttons from the new ion-datetime component does not work in some screen resolution. Once we use the month navigation buttons, the picked date cannot be displayed anymore, and we cannot navigate back to its month.

It seems the IntersectionObserver callbacks aren't triggered when the zoom ratio is different of 100% : its threshold probably don't match anymore. It may be necessary to multiply/divide mode === 'ios' ? [0.7, 1] : 1 it with devicePixelRatio?

Expected Behavior

• Once you navigate to another month with the < and > buttons and click on one of its days, the calendar should stay on the month displayed.
• If a date is selected and you move to another month, you should be able to come back to this month. For now it is skipped and you cannot come back to it.
• When we navigate to another month, the month name should be updated in the calendar header

Steps to Reproduce

Zoom your browser to a value less than 100% or more than 100%

OR

Scale your screen using windows settings.

Scenario 1

• Click the forward or backward button (same issue in both directions)
• Click on any date inside the calendar : after first click calendar does not display the correct month anymore
• Now every time you click in any calendar day, the month will change again

Scenario 2

• Click on any day in the calendar
• Move to the next or previous month using < or >
• Try to go back to the initial month : it is now skipped and you can't focus it anymore

Code Reproduction URL

https://stackblitz.com/edit/ionic-angular-v5-dgsxmp?file=src/app/app.component.html

Ionic Info

Ionic CLI : 6.0.1
Ionic Framework : @ionic/angular 6.0.0-beta.6
@angular-devkit/build-angular : 12.2.7
@angular-devkit/schematics : 12.2.7
@angular/cli : 12.2.7
@ionic/angular-toolkit : not installed

Additional Information

Bug reproduced on Chrome 93.0.4577.82 & 94.0.4606.61 and Firefox 90.0.2, 92.0, 92.1

[liamdebeasi]

Thanks for the issue. Can you please clarify the steps to reproduce the issue? I cannot reproduce this on my end using Chrome 93.

[adeprez]

Having Chrome 93 too. I am running on windows 10.
I switched between French and English language, and from UTC+1 to UTC-6, the bug on Chrome was still there.

Here is the error workflow. After a click on month navigation buttons, the month display is scrolling, but the underlying model seems stuck to the original month (september). On my side I can 100% repro with the stackblitz link on Chrome.

[adeprez]

I edited the issue, I may have found why you cannot reproduce it.

I have two screens : a primary and a secondary. When I test on the primary, it works. On the other, it does not. It may be related to resolution, pixel density or whatever.

I think the issue involves the usage of IntersectionObserver : the callback aren't called when my browser is on the secondary screen (the one with 125% scaling from windows settings - recommended value).

To have the same behaviour, you can simply zoom in or out in your browser

[liamdebeasi]

Thanks I can reproduce this. The issue here is that the Intersection Observer is not firing when the browser is zoomed. I can reproduce this on a 1080p monitor and a 2K monitor.