It depends on the browser and the device.
Some “superimpose” the scrollbars on top of the back-ground image.
Then the image will not move. F.i. with an iPad
Others draw the scrollbars at the right next to the background image.
Then when a “smaller” pop-up is drawn, the current html is covered with a new layer and the main background becomes “inactive”, the main scrolll bars are not drawn and the main background image grows to fill the whole area.
Maybe some html expert can find a solution for that.
The background image doesn’t move on a iPad because the display is only 3 blocks wide by 5 lines deep, and there is no need for a horizontal scroll bar. And the vertical scroll bar is minimal in size.
On PC my page is 4+4+4+3 blocks, with huge scroll bars. . .
The display of blocks is dynamic and adepts itself to the window width.
There should be only vertical scroll bars Horizontal ones should never occur.
Also for 4 wide X 4 high.
But I seem to have miscalculated a few pixels on PWS_index2.php lines 268-300
To get rid of that:
css/featherlight.css lines 9 - 12 now read
html.with-featherlight {
/* disable global scrolling when featherlights are visible */
overflow: hidden;
}
change that to
html.with-featherlight {
/* disable global scrolling when featherlights are visible
overflow: hidden; */
}
To get it active one needs to do “inspect” and “force reload” to reload the changed .css script
To get rid of the horizontal scroll bar if you physical screen is wider than 1280px
→ just enlarge the window
If physical screen is exactly 1280px wide there is really no decent solution as that is the exact wide of 4 blocks wide + normal overhead
Solution 1: Switch to 3 blocks wide if the window is less than 1290px would mean only 3 blocks wide display
→ IMHO unacceptable
Solution 2: Make every block and all containers a few pixels smaller but that would result in new formatting problems in some blocks.
→ a lot of tweaking
Need to test first.