EPUB columns are not refreshed when rotating a device

[mickael-menu]

Bug Report

What happened?

When rotating the device, EPUB columns get messed up if we don't recreate the Activity:

Screen.Recording.2022-06-03.at.11.51.07.mov

Expected behavior

How to reproduce?

1. Disable recreation of the reader Activity during screen rotations in AndroidManifest.xml:

   <activity
       android:name=".reader.ReaderActivity"
       android:configChanges="orientation|screenSize"
       android:label="Reader" />

2. Open an EPUB.
3. Rotate the device.

Environment

• Readium version: develop

Testing device

• Android version: API 31
• Is it an emulator? Yes

Additional context

I'm not 100% sure this is to be fixed, as Android recommend to not handle configuration changes manually anyways:

Caution: Handling the configuration change yourself can make it much more difficult to use alternative resources, because the system does not automatically apply them for you. This technique should be considered a last resort when you must avoid restarts due to a configuration change and is not recommended for most applications.
https://developer.android.com/guide/topics/resources/runtime-changes#HandlingTheChange

However, this issue might surface in other legit situations like a resizable window on Chrome OS.

This is already supposed to work with this piece of JavaScript code, maybe there's an issue with Android.getViewportWidth():

kotlin-toolkit/readium/navigator/src/main/assets/_scripts/src/utils.js

Lines 67 to 79 in ce1c73e

	function onViewportWidthChanged() {
	// We can't rely on window.innerWidth for the pageWidth on Android, because if the
	// device pixel ratio is not an integer, we get rounding issues offsetting the pages.
	//
	// See https://github.com/readium/readium-css/issues/97
	// and https://github.com/readium/r2-navigator-kotlin/issues/146
	var width = Android.getViewportWidth();
	pageWidth = width / window.devicePixelRatio;
	setProperty(
	"--RS__viewportWidth",
	"calc(" + width + "px / " + window.devicePixelRatio + ")"
	);
	}

[mickael-menu]

Calling onViewportWidthChanged from the ResizeObserver seems to fix the problem. However, we loose the scroll progression as it is not restored by the web view. This needs more work.