Short pages on IE11 -- readium thinks this is two pages, rather than one #470
Description
I have a book chapter that has a stylesheet. The chapter markup is essentially this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en-gb" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="../styles/styles.css"/>
<link rel="stylesheet" type="application/vnd.adobe-page-template+xml" href="../styles/page-template.xpgt"/>
</head>
<body>
<p class="center1">Dedication</p>
</body>
</html>
In the function "updatePagination()", the code eventually sets the width, column-count, and column-width of the _$epubHtml element.
I added some diagnostic statements, as follows:
console.log('b1', _$epubHtml[0].scrollWidth)
_$epubHtml.css("width", (_htmlBodyIsVerticalWritingMode ? _lastViewPortSize.width : _paginationInfo.columnWidth) + "px");
console.log('ba', _$epubHtml[0].scrollWidth, _paginationInfo.columnWidth)
_$epubHtml.css("column-count", "auto");
console.log('bb', _$epubHtml[0].scrollWidth, _paginationInfo.columnWidth)
_$epubHtml.css("column-width", _paginationInfo.columnWidth + "px");
console.log('b2', _$epubHtml[0].scrollWidth)
When I set the page to 1166 pixels wide (so that the console shows 'b1 1166) with the above page displayed, then on Chrome I see the following diagnostics; the scrollWidth is computed as expected, since the content can be displayed on a single page in readium:
b1 1166
ba 1166 1166
bb 1166 1166
b2 1166
On IE 11, the scrollWidth is computed incorrectly.
b1 1166
ba 1166 1166
bb 1166 1166
b2 2352
It appears that IE itself is computing this incorrectly, but the net effect is the chapter takes up two pages on the readium reader; the first page has the content; the second page is blank.