Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cover image shows too large on Chrome, Firefox #464

Open
kimtuck opened this issue Jan 19, 2016 · 3 comments
Open

Cover image shows too large on Chrome, Firefox #464

kimtuck opened this issue Jan 19, 2016 · 3 comments
Assignees
@danielweck
Labels
func:CSS func:Layout priority:Medium type:Bug

Comments

@kimtuck
Copy link

kimtuck commented Jan 19, 2016

I have a book with the following markup for the cover page:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg" xml:lang="en-gb" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Everybody Matters</title>
<link rel="stylesheet" type="text/css" href="../styles/9780802712103.css"/>
</head>
<body>
<div>
<svg:svg viewBox="0 0 1053 1600">
<svg:image xlink:href="../images/9780802712103.jpg" transform="translate(0 0)" width="1053" height="1600" />
</svg:svg>
</div>
</body>
</html>

When I view this page on IE (IE 11) the cover image is scaled so that the entire image appears on the page; When I view the page on Chrome and Firefox, the image is much larger and only the top portion of the cover is visible.

I'm not sure if this is a readium issue, or if this is an issue with the way the document's markup is constructed; but since the behavior is different between browsers, I thought at least I'd post the issue.
@kimtuck
Copy link
Author

kimtuck commented Jan 19, 2016

Update:
On IE, the complete image is scaled to fit the screen.
On Firefox, the image is scaled to take up the entire width of the screen; the image is cut off at the bottom (only the top portion of the image is displayed) and when you move to the next page, readium advances to the next chapter.
On Chrome, the image is scaled to take up the entire width of the screen, like Firefox; when you move to the next page, you see the middle section of the title page image; moving to the next page shows the bottom portion of the title page image; and then you finally move to the following chapter.

So it's not consistent among the three browsers.

@friedolinfoerder
Copy link

Is there anything new regarding this issue? Maybe some kind of workaround?

Is this related to readium/readium-shared-js#267 or is the cover rendering a separate topic?

@kimtuck
Copy link
Author

kimtuck commented Oct 12, 2016

The wrapping div (the first child of the tag does not have a sizing css property. If I manually add "height: 100%" then the cover image scales correctly on all browsers I've tested.

Of course, this breaks pages other than the cover, but it's a start.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@danielweck danielweck

Labels
func:CSS func:Layout priority:Medium type:Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@danielweck @friedolinfoerder @rkwright @kimtuck