Open JayPanoz opened 3 years ago
Duplicate issue moved: https://github.com/readium/readium-css/issues/100
Problematic CSS: https://github.com/readium/readium-css/blob/583011453612e6f695056ab6c086a2c4f4cac9c0/css/src/modules/ReadiumCSS-safeguards.css#L52-L53
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?
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;
}
Proposal: add Daniel’s snippet to the safeguards module.
Submitting a bug report that was discovered by @aferditamuriqi
Short description of the issue/suggestion:
There is a rendering issue with
audio
andvideo
because ofwidth: auto
andheight: auto
in this declaration (should also impact the vertical writing version of the module).https://github.com/readium/readium-css/blob/583011453612e6f695056ab6c086a2c4f4cac9c0/css/src/modules/ReadiumCSS-safeguards.css#L48-L69
For instance, in this screenshot, there should be audio controls:
And when you disable
width
andheight
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 therevert
value:This should be fixed quickly as it’s a high priority bug.