Log in / Register

Forum › Bugs

Image flex bug in Prince 14

tunetheweb
The following HTML does not render the image:

<!doctype html>
<html>
    <head>

    <style>
figure {
  display: flex;
}

img {
  max-width: 100%;
  height: auto;
}
    </style>

</head>
<body>

  <figure>
    <img src="image.png" alt="" height="100" width="100" />
  </figure>

<body>


When I do the same thing via a server call, I can see the image is requested - it's then just not included in the PDF.

Removing either the 
display: flex;
or the 
max-width: 100%;
style causes the image to render again but it won't render with both there.

This works fine in Prince 13.6, and also Chrome, Firefox and Safari.

Edited by tunetheweb

tunetheweb
Actually this may not be entirely accurate as can't get that to minimum test case to work on 13.6 now either, but my larger page did used to work in 13.6 and doesn't work in 14. So still digging what worked before but doesn't work now.

However the case still remains - the above test case should work in all versions IMHO.
tunetheweb
Ah got it. Missed the height and width attributes on the test case. Edited first post to include them. That example now works in 13.6 but not 14.
markbrown
We'll look into this. Thanks for the bug report!
mikeday
This issue has been fixed in Prince 14.1, available now. Thanks again for letting us know! :D
tunetheweb
Thanks for that, but still didn't work for me :-(

But I do agree the use case I raised above now works when it didn't before, so guess it's similar but different.

If I add an extra div (which is closer to my use case), it fails to display the image:

  <figure>
    <div>
       <img src="image.png" alt="" height="100" width="100" />
    </div>
  </figure>


And if you want the full use case I use Prince for, it's here:
prince "https://almanac.httparchive.org/en/2019/ebook?print" -o ebook.pdf
And I'm seeing the issues in figures (e.g. Figure 1.1 on page 8 ).

Just in case there's a further issue not covered by that use case and you get bored of me drip feeding it to you issue by issue :-)

Edited by tunetheweb

markbrown
We'll investigate this problem too. Thanks for the drip feed :-)

In the meantime you may be able to work around the problem by using
img { display: block; }

This seems to work for the example above and also for Figure 1.1 in the ebook, although you may need to fine tune the selector if you rely on inline images elsewhere.

Mark
twantzen
I’m encountering problems with using flexbox and max-width/max-height either: All img are distorted, although only max-width and max-height is applied. I’ve send Mike our usecase via email.

Edited by twantzen

twantzen
14.1 fixed our issue – thanks!