Width and height safeguards hide audio controls + video

[JayPanoz]

Submitting a bug report that was discovered by @aferditamuriqi

Short description of the issue/suggestion:

There is a rendering issue with audio and video because of width: auto and height: auto in this declaration (should also impact the vertical writing version of the module).

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

Lines 48 to 69 in 5830114

	img, svg, audio, video {
	/* We probably don’t need to use modern box-sizing as auto behaves like it */
	box-sizing: var(--RS__boxSizingMedia);
	width: auto;
	height: auto;
	/* Some files don’t have max-width */
	max-width: var(--RS__maxMediaWidth);
	/* We’re setting a max-height, especially for covers */
	max-height: var(--RS__maxMediaHeight) !important;
	/* Object-fit allows us to keep the correct aspect-ratio */
	object-fit: contain;
	/* For page-break, we must use those 3
	We can’t use a variable there, webkit seems to no support them for those properties */
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	}

For instance, in this screenshot, there should be audio controls:

And when you disable width and height in dev tools, they are displayed correctly:

Given these can be useful for other media e.g. img, audio + video should be moved to their own specific declaration. If we want to safeguard the sizing and fall back to the browser’s default, it seems we can use the revert value:

This should be fixed quickly as it’s a high priority bug.

[danielweck]

Duplicate issue moved: #100

Problematic CSS:

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

Lines 52 to 53 in 5830114

	width: auto;
	height: auto;

I have an EPUB constructed from a set of webpages, notably this one (scroll down to see the audio elements):

http://diagramcenter.org/diagram-reports/diagram-report-2019/sonification.html

As tested in Thorium, ReadiumCSS applies auto to the width and height properties, resulting in a 0px CSS box (i.e. invisible audio element despite the controls attribute).

I fixed this problem by adding the following to the author stylesheet:

audio {
width: 100%;
height: 2em;
}

I would have preferred to use inherit or initial in order to avoid "hard coding" property values (especially the em value) ... but this didn't work in the Web Inspector (Chromium).

Any idea of why auto breaks things?

[danielweck]

Update: in Thorium we now inject the following CSS <style> element immediately after ReadiumCSS "before" external <link> stylesheet (which is first in the HTML head), therefore before any authored styles:

audio[controls] {
width: revert;
height: revert;
}

[JayPanoz]

Proposal: add Daniel’s snippet to the safeguards module.