Audio tag inside the p element not rendering

[mrifni]

So this sample tag doesnt render but renders an empty white space in the latest test app build.

<p class="calibre1"><b class="calibre2">ʺAnd donʹt pursue (say) that of which you have no knowledge (of).ʺ </b>[Sooratul-Israa, 17:36]<p><audio src="https://cdn.islamic.network/quran/audio/128/ar.alafasy/2065.mp3" controls="controls">Audio not supported!</audio></p></p>

I have sent the sample EPUB via slack.

[mickael-menu]

Note to self: shared EPUB is named 0fdf1bffb52048bd849afa7cf698c4c1_sample.epub

[JayPanoz]

@mickael-menu see readium/readium-css#100

[mickael-menu]

@mickael-menu see readium/readium-css#100

Thanks, that may be related. The audio elements don't have auto width but this is the stylesheet:

audio {
    -webkit-box-shadow:  2px 2px 4px 0px #006773;
    box-shadow: 2px 2px 4px 0px #006773;
    -moz-border-radius:25px;
    -webkit-border-radius:25px;
    border-radius:25px;
}

[mrifni]

so I have tested by putting width="auto" height="auto" in the epub file and still it didnt render the audio tag for me.

<p><audio src="https://cdn.islamic.network/quran/audio/128/ar.alafasy/1268.mp3" controls="controls" width="auto" height="auto">Audio not supported!</audio></p>

[JayPanoz]

No I meant this is a known issue in fallback styles of Readium CSS (auto appearing to make the controls invisible) but the fix wasn’t PR’d yet.

If you put something like this in your CSS, does it solve the issue by any chance?

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

[mrifni]

it does work but there is a small issue. When I press the 3 dots at the end of the audio player ( next to the mute button ) page moves to middle of two pages.

Before click

After click

[danielweck]

FYI, this is how we work around this ReadiumCSS bug in Thorium: readium/readium-css#94 (comment)

[mickael-menu]

Thanks @danielweck, that fixed the issue!