search

readium / readium-css

🌈 A set of reference stylesheets for EPUB Reading Systems, starting with Readium Mobile
https://readium.org/readium-css/
BSD 3-Clause "New" or "Revised" License
89 stars 20 forks source link

audio HTML element width height "auto" computes to 0px dimensions #100

Closed danielweck closed 2 years ago

danielweck commented 3 years ago

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?

JayPanoz commented 3 years ago

That’s a good question.

I believe I discussed this bug with someone in Slack a few months ago but I’m afraid I can’t recall whether it was @aferditamuriqi or @mickael-menu. But that person had a fix if I’m not mistaken. Unfortunately I can’t find any issue nor PR so it could have been a slightly different bug?

aferditamuriqi commented 3 years ago

Yes we did discuss this and I'll look up the fix and share it

JayPanoz commented 3 years ago

Thanks!

danielweck commented 2 years ago

Duplicate of https://github.com/readium/readium-css/issues/94