Fix blank page on browsers without support for ResizeObserver

This corrects a bug in old browsers (Firefox, Waterfox, etc.) that don’t have support to “ResizeObserver” method.

First, copy the script ResizeObserver.js from there : https://github.com/que-etc/resize-observer-polyfill
(inside “resize-observer-polyfill-1.5.1\dist” directory)
To : /core/js/

Next copy the templates (inside /core/templates/ ):
layout.base.php
layout.guest.php
layout.public.php
layout.user.php
To /themes/YOUR_THEME_NAME/core/templates/

Add in each files this line :

<?php emit_css_loading_tags($_); ?>
<script nonce="<?php p(\OC::$server->getContentSecurityPolicyNonceManager()->getNonce()); ?>" defer="" src="/core/js/ResizeObserver.js"></script>
<?php emit_script_loading_tags($_); ?>

Then activate your theme in /config/config.php

That’s it ! Enjoy ! :partying_face:

FOR NextCloud TEAM :
if you wish to include this in the next release, you can check there : https://www.npmjs.com/package/resize-observer-polyfill
OR also a newer one (with .ts files) : https://github.com/juggle/resize-observer

Nextcloud doesn’t use this API. Hence I don’t see why we should monkey-patch this in our code base. We should identify the libraries that use it instead and fix the problem upstream.

To add some context: https://github.com/nextcloud/calendar/pull/2620 and https://github.com/nextcloud/server/issues/23972.

1 Like

Another solution from ltGuillaume : https://github.com/nextcloud/calendar/pull/2620#issuecomment-723458758

Concerning that, isn’t there a way to include the JavaScript file in the theme, instead of putting in /core/js
was ok for me (where $this->themeEntity = in defaults.php has the same value of the theme directory name).

<script nonce="<?php p(\OC::$server->getContentSecurityPolicyNonceManager()->getNonce()); ?>" defer="" src="/themes/<?php p($theme->getEntity()); ?>/core/js/ResizeObserver.js"></script>

@ChristophWurst
A quick search on word “ResizeObserver” gave me this result : used in :

/apps/appointments
/apps/calendar
/apps/contacts
/apps/dashboard
/apps/deck
/apps/files
/apps/forms
/apps/guests
/apps/notifications
/apps/photos
/apps/polls
/apps/privacy
/apps/recommendations
/apps/settings
/apps/spreed
/apps/text
/apps/updatenotification
/apps/user_status
/apps/viewer
/apps/weather_status
/apps/workflowengine

and
/core/js/dist/unified-search.js

Let me guess: it’s found inside a javascript bundle :speak_no_evil:

@ChristophWurst

Maybe this answer : https://github.com/nextcloud/calendar/pull/2620#issuecomment-724012017

IMPORTANT :

in all this templates, replace :

<?php include 'layout.noscript.warning.php'; ?>

by

<?php include getcwd().'/core/templates/layout.noscript.warning.php'; ?>