Forum Bugs

Page break issue with svg nested in div

yiqiu
Hello there

We are seeing weird issue with div that contains svg.

Specificlly, if a div contains a svg with the same size, it somehow takes 4pt more vertical space than it should be.

it is worth noting that we are setting density to 72 dpi to ensure 1:1 point to pixel mapping.

The command we used is:
prince --no-compress --css-dpi=72 svg-height-bug.html


Thanks!

--
Yiqiu
Software Engineer
Opower
  1. svg-height-bug.html1.0 kB
yiqiu
Also, it seems it only happens when the div containing the svg is the last element before page boundary.
  1. svg-height-bug-2.html1.6 kB
hallvord
Hi,
I've investigated this somewhat - thanks for attaching the html files, those are very helpful. I've tried to create a test case from the first one and added it to a repository I maintain with various tests - hope you don't mind: https://github.com/yeslogic/miscellaneous-testcases/commit/8695256a572004f6a34484644ca3b60006883b5b

I've added width/height attributes for the SVG because it seems clearer to me that way that there is a bug here, removed the red color (because red often signifies "something is wrong" in test cases) and added a short statement describing the expected rendering. I hope this captures the issue you're working on.

Announcement: repos for tests/utils

  1. 3552-svg-height-bug.pdf25.3 kB
    Generated PDF from test case
yiqiu
Hey hallvord,

Thanks for look into this and confirm this is an issue.

Do you have a timeline on getting this fixed?

Best,
Yiqiu
hallvord
Hi Yiqiu,
I don't have an estimate for when it might be fixed at the moment. @mikeday mentioned to me that there are some similar reports, so maybe they will get prioritised and fixed together? :)
-HR

Announcement: repos for tests/utils

yiqiu
This seems to be a serious layout issue. Maybe you or @mikeday could provide us with a workaround in the mean time? This is blocking the deployment of one of our new features.

--
Yiqiu
Software Engineer
Opower
mikeday
Apply "display: block" to the SVG so that it does not get treated as an inline-block and place on a line which takes up slightly more height due to the descender.