nimmolo
commented
1 month ago Thanks - i'm aware of this one. It will be reliably resolved by Bootstrap 4/5, because CSS's display: flex; redraws on screen size change automatically, using native browser functions.
I didn't want to fix it until then because i believe the JS overhead monitoring the page for window resize could slow the page.
Saw a couple of issues when bouncing between full screen mode in Chrome on MacOS and non-full screen mode. For example,
and
The one with the overlapping images is more of an issue than the one with the extra whitespace, but both are resolved by doing a screen refresh.
The closest I could get to reproducing the overlapping images case is to to go to the home page (https://mushroomobserver.org/), click on an observation, zoom in on the image (light box mode), then make the window full screen (to better see the image), hit the X to get out of the image light box, then click the MO logo, it often at first messes things up, but it seems to usually correct itself a second or two later. In the original case I saw, it never redrew itself, until I forced a refresh. To get the version with the extra whitespace, I just clicked out of full screen mode in Chrome after redrawing the home page.
I wonder if there's a way to reliably force a refresh when the screen size changes. That seems like it would resolve the cases without too much overhead.