A date picker inside a lightbox takes a very long time to load in iOS (couldn't reproduce in Chrome or Firefox, both desktop and Android), when the number of months to show increases. For instance, I've been able to consistently observe ~2 seconds loading time in a iPhone 6s for showing a calendar of 12 months.
This is the timeline with two months:
This is the timeline with 12 months:
(Both timelines are captured from a real iPhone 6s, not emulated, using Safari's remote debugging)
Even with only 2 months, the loading is still noticeably slow.
Drilling down, it seems that the function that is taking the increasing self execution time is fetchPolyfill. Safari says that it's xhr-utils.js:420, originally v0.js:183.
On a side note, I think this code is coming from /third_party/subscriptions-project/swg.js, which surprises me a little bit (I didn't expect to see SwG code here). The reason why I think this is the code that is being executed is line swg.js:3961, more specifically, that underscore after allowedFetchTypes. That same underscore appears in the code being executed in this case (see example below), but doesn't appear in /src/polyfills/fetch.js, which is what I would have expected to be executed.
How to reproduce
Codepen example. Once it's loaded, click on the second "Pick a date"/"lightbox datepicker thin" date picker on the left, and wait for the lightbox containing the date-picker to load.
cc/ @dvoytenko . (adding as your handle is mentioned in that polyfill)
cc/ @cvializ (because amp-date-picker)
A date picker inside a lightbox takes a very long time to load in iOS (couldn't reproduce in Chrome or Firefox, both desktop and Android), when the number of months to show increases. For instance, I've been able to consistently observe ~2 seconds loading time in a iPhone 6s for showing a calendar of 12 months.
This is the timeline with two months:
This is the timeline with 12 months:
(Both timelines are captured from a real iPhone 6s, not emulated, using Safari's remote debugging)
Even with only 2 months, the loading is still noticeably slow.
Drilling down, it seems that the function that is taking the increasing self execution time is fetchPolyfill. Safari says that it's xhr-utils.js:420, originally v0.js:183.
On a side note, I think this code is coming from /third_party/subscriptions-project/swg.js, which surprises me a little bit (I didn't expect to see SwG code here). The reason why I think this is the code that is being executed is line swg.js:3961, more specifically, that underscore after
allowedFetchTypes. That same underscore appears in the code being executed in this case (see example below), but doesn't appear in /src/polyfills/fetch.js, which is what I would have expected to be executed.How to reproduce
Codepen example. Once it's loaded, click on the second "Pick a date"/"lightbox datepicker thin" date picker on the left, and wait for the lightbox containing the date-picker to load.
cc/ @dvoytenko . (adding as your handle is mentioned in that polyfill)
cc/ @cvializ (because amp-date-picker)