Safeguards’ viewport units are impacted by zoom factor

[JayPanoz]

Originally handled in #206 but the issue is too complex to resolve it at the time we manage --RS__defaultLineLength.

List of impacted styles:

• css/css/src/modules/ReadiumCSS-safeguards-vertical.css

  Line 16 in 0a8f564

  --RS__maxMediaHeight: 100vw;

• css/css/src/modules/ReadiumCSS-safeguards.css

  Line 17 in 0a8f564

  --RS__maxMediaHeight: 95vh;

As noted in the previous issue, we have two challenging problems:

1. browsers don’t do behave the same, which means using a dirty CSS trick to target Safari/Webkit and not apply the compensation;
2. In case a percentage value is passed – we need to do that on iOS for instance, as we switch from zoom to text-size-adjust, we cannot divide 95vh by this percentage, the divider has to be unitless… Converting through CSS functions seem difficult, if not impossible for some unknown reason at the moment

In practice, we do not have a solution for problem number 2.

[JayPanoz]

Well of course this is an issue we already solved… sigh:

css/css/src/modules/user-settings-submodules/ReadiumCSS-fontSize_pref.css

Lines 17 to 40 in aa61484

	@supports selector(figure:has(> img)) {
	:root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] figure:has(> img),
	:root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] figure:has(> video),
	:root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] figure:has(> svg),
	:root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] figure:has(> canvas),
	:root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] figure:has(> iframe),
	:root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] figure:has(> audio),
	:root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] div:has(> img:only-child),
	:root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] div:has(> video:only-child),
	:root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] div:has(> svg:only-child),
	:root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] div:has(> canvas:only-child),
	:root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] div:has(> iframe:only-child),
	:root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] div:has(> audio:only-child),
	:root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] table {
	zoom: calc(100% / var(--USER__fontSize)) !important;
	}
	:root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] figcaption,
	:root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] caption,
	:root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] td,
	:root:--experimental-zoom:not(:--deprecated-font-size):not(:--iOS-patch)[style*="--USER__fontSize"] th {
	zoom: var(--USER__fontSize) !important;
	}
	}

Had totally forgotten about it…