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.

[sean-perkins]

Hello 👋

Currently reviewing this issue and I'm unable to reproduce, in either the Stackblitz example or against the latest locally. I've also tried downgrading the Stackblitz example to 6.0.0-beta.6 (as the issue originally calls to) and cannot reproduce.

I'm on Chrome 97.

If you are still tracking this issue, can you please verify if the issue is resolved on the latest for you? Thanks!

[adeprez]

Hello, I can confirm we cannot reproduce it anymore on Chrome 98, neither with ionic 6.0.0 nor 6.0.0-beta.6. A Chrome update may have updated the intersection observer.

A similar issue is still present when zoomed out on firefox 97, if you navigate to the next month and click on any day, it will slide to the next month. The behaviour is different from the original issue, but it seems related to intersection observer + zoom anyway.

[sean-perkins]

@adeprez appreciate the follow-up, I'll re-focus efforts to the Firefox / Zoom issue. Thanks!

[sean-perkins]

@adeprez appreciate the follow-up, I'll re-focus efforts to the Firefox / Zoom issue. Thanks!

Follow-up here, I have not been able to reliably reproduce this issue in Firefox on MacOS with the same installed version. There is a similar bug that I have addressed, that affects sub-pixel units and the intersection observer used in the datetime.

I believe that the browser zoom effect may relate to that issue and could be solved with the same fix.

If anyone who is able to reproduce the Firefox issue, can verify against this dev build and let me know the results, I would greatly appreciate it!

6.0.8-dev.1644851642.0ae5b1b

You can install for any respective @ionic/* package you are using in your reproduction.

[sean-perkins]

Since I am unable to reproduce, I will be closing this issue out. Please feel free to comment if the problem persists and I will be happy to re-open.

The PR that should address some of the oddities with zoom is #24762. This is available as of v6.0.9 and later.

[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.