Suwayomi / Suwayomi-WebUI

Mozilla Public License 2.0
114 stars 50 forks source link

[Feature Request] Add support for ResizeObserver to old browsers #799

Open Richard602 opened 1 month ago

Richard602 commented 1 month ago

What feature should be added to Suwayomi?

Please consider providing legacy support for the ResizeObserver in old browsers. Whether by polyfill or through some other method.

Why/Project's Benefit/Existing Problem

This will continue support for old browsers that do not yet have ResizeObserver.

On a iPad stuck at version 12, the browsers (Safari, Chrome, Firefox) cannot be updated to a version that supports this feature, and instead the error Can't find variable: ResizeObserver will pop up.

I've tried rebuilding the v1.1.0 release with polyfill from @juggle/resize-observer , and this seems to have successfully added it to the version of Safari i'm running, so I believe only the ResizeObserver feature is missing to run the WebUI on old browsers.

schroda commented 1 month ago

I don't have a way to test this myself, but prs are always welcome preferably via using vite plugin legacy instead of using the polyfill directly

Richard602 commented 1 month ago

Hi. I was also hoping to use vite plugin legacy. While assuming I can just add a line into vite.config.ts to get it, I'm not sure what to put inside modernPolyfills: [], I don't how to look for the string value that I can put in there to get ResizeObserver. From the little searching I did, I can't seem to find or see vite plugin legacy being able to provide ResizeObserver.

Also, I instead end up finding this dev.to post/article which said ResizeObserver needs additionalLegacyPolyfills: [] instead.

Sorry for bringing up this hassle. I've only looked into vite the day I made the feature request, but If you can point me towards where I need to properly look to get vite plugin legacy to provide ResizeObserver, I'll be happy to try it out and see if it can work.

schroda commented 1 month ago

from my understanding additionalLegacyPolyfills takes npm package names (e.g. additionalLegacyPolyfills: ['@juggle/resize-observer', ...]) which need to auto polyfill, which, from what I've seen, @juggle/resize-observer does not do, so I guess vite won't work and you have to manually polyfill it

Richard602 commented 1 month ago

A pity. Oh well. My feature request still stands, in hopes of a method other than using @juggle/resize-observer appears.

schroda commented 2 weeks ago

I've just added @juggle/resize-observer manually without vite (f7e5388e2a60a55be1230a4b05fd5c1698721c9a)

Richard602 commented 1 week ago

Pardon me for the late response. tried building from source to see if it works, but it seems I can't get past the login on my ipad. I guess I'll try again once the new UI is released in a major release. Edit: With the stable server, I can see the UI loaded after logging in using a PC browser. On the ipad, after logging in, only a white page is displayed.

schroda commented 1 week ago

are you using the stable server? for the latest webUI version you have to use the servers preview version, so this could be the problem

Richard602 commented 1 week ago

I was using the stable version indeed. I'll try again at some point with the server preview version. For now, i'll edit my previous comment to describe what happens when using the stable server.