Simple demo page to show viewer behavior during resizing of the container. The viewers' container elements are styled with width and height of 100%, with dimensions set by CSS properties on a parent element.

Pick options to test:

These options apply to both of the demo viewers on the left (top and bottom).

Use v3.1 resize logic
Use new resize logic
Use polling
Use ResizeObserver
preserveImageSizeOnResize: false
preserveImageSizeOnResize: true
autoResize: true
autoResize: false

Click to resize the viewer:

Wide sidebar
Narrow sidebar

Demo: Issues with styling the viewer element when an image is opened

If a DOM/CSS operation is triggered by a viewer event (e.g. the 'page') event for multi-page images, the timing of the viewer resizing itself (if autoResize=true) can be inconsistent - sometimes before, sometimes after the image has finished loading and the Viewport.goHome() call is generated. To ensure consistency, call viewer.forceResize() after altering the page layout.

Note: to see this in action most clearly, select the options for "preserveImageSizeOnResize: false" and "Use polling" above. 

//pseudocode
//container will change size
setSidebarForImage();

// image might not "open" at home
// viewer.forceResize();
                    
//pseudocode
//container will change size
setSidebarForImage();

//image should always "open" at home
viewer.forceResize();