epub.js
epub.js copied to clipboard
Image and svg's max-width doesn't get set because of invalid property
image and svg's max-width which is getting set at https://github.com/futurepress/epub.js/blob/b957ccf0fbffc6cc97b86f0dd206b76ababe8d36/src/rendition.js#L946 uses verticalPadding but verticalPadding doesn't exist in CSSStyleDeclaration and because of that it ends up setting an invalid value hence the issue, images in some books are overlapping with text

Note this change helps but does not really work in 2 page spread mode as the sum of paddingLeft and paddingRight double counts the gap since columnWidth has already had it removed.
A potential solution is to subtract out the gap (this._layout.gap) from the calculation of horizontalPadding to prevent double counting it. Seems to work okay in our testing, but I am not sure this is a correct solution.
To see this bug, place an image with width 100% between two paragraphs of text, and grow the window until two columns (2 pages) are shown. The max-width css added in adjustImages clips the image to be less than the width of the text when it should be equal. This is easiest to see with fully justified text.
Subtracting out the gap from horizontalPadding seems to work in single page and two page (2 columns) mode.
Hope this helps.