DOMException thrown on Android mobile Chrome

[amarsiingh]

Thanks for your efforts to make this component available for Svelte.
It has been quiet useful to have a Date picker component with the support for date ranges.
Even though this picker works as expected on the Web browsers on desktops, its throwing an error which originates from Flatpickr component when we try to use it on smaller view ports such as Android mobile Chrome.
Here is the full error stack:

Uncaught (in promise) DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at getDocumentStyleSheet (http://localhost:3000/node_modules/.vite/deps/chunk-EN7TYZOW.js?v=56d3d774:1874:18)
    at positionCalendar (http://localhost:3000/node_modules/.vite/deps/chunk-EN7TYZOW.js?v=56d3d774:1854:17)
    at Object.open (http://localhost:3000/node_modules/.vite/deps/chunk-EN7TYZOW.js?v=56d3d774:1655:7)
    at handleOpen (http://localhost:3000/src/components/DatePicker.svelte:445:19)
    at $$self.$$.update (http://localhost:3000/src/components/DatePicker.svelte:560:7)
    at update (http://localhost:3000/node_modules/.vite/deps/chunk-TVA3GBF4.js?v=56d3d774:1004:8)
    at flush (http://localhost:3000/node_modules/.vite/deps/chunk-TVA3GBF4.js?v=56d3d774:979:7)

Once this error is encountered the entire app is usable and forces user to reload.

What have I tried so far?

• Made sure that import 'flatpickr/dist/flatpickr.css'; is in the main app.css file as well as tried to put that in the main +layout.svelte

Note: This error occurs only on Android mobile Chrome, not on iOS mobile browser (Safari)

Any suggestions or workarounds for this issue, is much appreciated. Thanks.

[jacobmischka]

It looks like you're getting that error because of CORS failing for your stylesheet: https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property

This svelte library doesn't do any stylesheet loading, so there's nothing to be done here. The getDocumentStyleSheet and positionCalendar functions are defined in and called by upstream flatpickr. They could probably handle that error more gracefully, so you may want to raise an issue there. https://github.com/flatpickr/flatpickr/blob/614568f20daff9fdef906e8451876d8918c68d3c/src/index.ts#L2275

[amarsiingh]

Thanks for quick response.
Yes, the CORS implementation in Chrome also applies to Stylesheets, especially if the contents are modified.
However, since my app is not controlling any of that, I'll have to work on implementing some workaround on Android Chrome devices.
Meanwhile I'll raise an issue with Flatpickr team. Thanks