Q: iBooks running on iOS6 has background-color problem and..

Question

Sean Ki

Level 1 (0 points)

Q: iBooks running on iOS6 has background-color problem and..

iBooks(3.0.2) - background color doesn't work on entire page.

[iOS5_bg_o]

[iOS6_bg_x]

Both ‘iOS5_bg_o’ and ‘iOS6_bg_x’ have the same CSS settings.

But they look different.

In the iOS6, BODY tag’s background color doesn’t cover the full page.

I wonder what Apple changed on iOS6.

the other problem is about height.

I set the CSS like the picture 'iOS5_height_o'.

It works perfectly on iOS5.

but the same file look differently on iOS6.(see iOS6_height_x.png)

It is the same epub. but top margin has gone and height of inner table has shrinked.

I guess that some part of layout system went wrong on iOS6.

[iOS5_height_o]

[iOS6_height_x]

Do you have any idea?

Thank you for your concern.

iPad 2, iOS 6.0.1, CSS layout system ibooks

Posted on Jan 17, 2013 12:45 AM

I have this question too

Solved

Jean-Michel Dentand

Level 1 (35 points)

A:

My mistake!

https://www.dropbox.com/s/scho443026w5daf/height_test_jm_2.epub

Posted on Feb 3, 2013 11:04 PM

Q: iBooks running on iOS6 has background-color problem and..

All replies

Helpful answers

by Jean-Michel Dentand,Helpful

Jean-Michel Dentand Jan 26, 2013 3:31 PM in response to Sean Ki
Level 1 (35 points)

Jan 26, 2013 3:31 PM in response to Sean Ki

You won't be able to change the background color (to the edge of the page) in a normal EPUB book in iBooks. You could only achieve this in a Fixed Layout document.

As for the height issue I would have to look at the code.

JM
Reply options

Link to this post

by Sean Ki,

Sean Ki Jan 27, 2013 9:27 PM in response to Jean-Michel Dentand
Level 1 (0 points)

Jan 27, 2013 9:27 PM in response to Jean-Michel Dentand

Thank you for the reply.

Do you see the same problem on your device?
Or Do you want me to send you any sample epub?
Reply options

Link to this post

by Jean-Michel Dentand,Helpful

Jean-Michel Dentand Jan 28, 2013 5:29 AM in response to Sean Ki
Level 1 (35 points)

Jan 28, 2013 5:29 AM in response to Sean Ki

Sure, send me your EPUB file I'll have a look.
Reply options

Link to this post

by Sean Ki,

Sean Ki Jan 30, 2013 6:14 PM in response to Jean-Michel Dentand
Level 1 (0 points)

Jan 30, 2013 6:14 PM in response to Jean-Michel Dentand

Dear Jean-Michel.

here is the link for that.
https://dl.dropbox.com/u/35955315/height_test.zip

Thank you a lot for your care.
Reply options

Link to this post

by Jean-Michel Dentand,

Jean-Michel Dentand Feb 3, 2013 10:45 AM in response to Sean Ki
Level 1 (35 points)

Feb 3, 2013 10:45 AM in response to Sean Ki

Hi Sean, apologies for delayed response.

I think I managed to achieve what you were looking for.

I added a <div> with position:absolute, but it's probably not the best idea for a reflowable EPUB...

https://www.dropbox.com/s/3bizxgbusg7us7c/height_test_jm.epub
Reply options

Link to this post

by Sean Ki,

Sean Ki Feb 3, 2013 10:23 PM in response to Jean-Michel Dentand
Level 1 (0 points)

Feb 3, 2013 10:23 PM in response to Jean-Michel Dentand

I really appreciate your help.
umm, but the file named height_test_jm.epub was the same that I sent named height_test.epub.
If you gave any change to the file height_test_jm.epub, Could you send me that again?

Thank you again.
Reply options

Link to this post

by Sean Ki,

Sean Ki Feb 4, 2013 4:34 PM in response to Jean-Michel Dentand
Level 1 (0 points)

Feb 4, 2013 4:34 PM in response to Jean-Michel Dentand

I checked it on my iPad mini. I works perfectly.
and We will check on many other viewers.

I appreciate it with all my heart.

Thanks again.

Regards,
Sean Ki.
Reply options

Link to this post

by ibuksgrup,

ibuksgrup Nov 4, 2013 11:33 AM in response to Jean-Michel Dentand
Level 1 (0 points)

Nov 4, 2013 11:33 AM in response to Jean-Michel Dentand

Hello,

I have the same problem as Sean Ki. Could you explain what is the solution of the problem?.

Best regards
Reply options

Link to this post

by Jean-Michel Dentand,

Jean-Michel Dentand Nov 10, 2013 12:04 PM in response to ibuksgrup
Level 1 (35 points)

Nov 10, 2013 12:04 PM in response to ibuksgrup

Hi ibuksgrup,

I can't remember how I fixed Sean’s problem — and unfortunately I deleted the EPUB file.

I played around with Sean's original code, and I managed to make an element fill the page by using the CSS3 vh unit (Sizing with CSS3's vw and vh units - Snook.ca):

So in Sean's code, it would be like this:

.table {
height:100vh !important;
}

Note: I added the ‘!important’ to overwrite the external stylesheet rule — you shouldn't have to use this in your code.

I hope this helps!

JM
Reply options

Link to this post

by ibuksgrup,

ibuksgrup Nov 11, 2013 2:25 PM in response to Jean-Michel Dentand
Level 1 (0 points)

Nov 11, 2013 2:25 PM in response to Jean-Michel Dentand

I really apreciate your help!
But I checked with iPad and Proof but don't work correctly.

We have in xhtml the following code

<body class="negro" id="rebelion" xml:lang="es-ES">
<div class="historia">
<p class="P0" id="toc_marker-4"><span class="color-blanco">Las cuatro edades<br />
del grafismo</span></p>
</div>
</body>

And in css file

body.negro {
background-color: black !important;
height:100vh !important;
}

If you can help us Iwill be very grateful with you

Thanks a lot
Reply options

Link to this post

by Jean-Michel Dentand,

Jean-Michel Dentand Nov 11, 2013 2:47 PM in response to ibuksgrup
Level 1 (35 points)

Nov 11, 2013 2:47 PM in response to ibuksgrup

What about this:

body { height: 100%; }
.historia {
      background-color: black;
      height: 100vh;
      overflow:hidden;
}
Reply options

Link to this post

Accepted Answer · Feb 3, 2013 11:04 PM

Jean-Michel Dentand

Level 1 (35 points)

Feb 3, 2013 11:04 PM in response to Sean Ki

My mistake!

https://www.dropbox.com/s/scho443026w5daf/height_test_jm_2.epub

Q: iBooks running on iOS6 has background-color problem and..

All replies Helpful answers

by Jean-Michel Dentand,★Helpful

by Sean Ki,

by Jean-Michel Dentand,★Helpful

by Sean Ki,

by Jean-Michel Dentand,

by Sean Ki,

by Jean-Michel Dentand,Solvedanswer

by Sean Ki,

by ibuksgrup,

by Jean-Michel Dentand,

by ibuksgrup,

by Jean-Michel Dentand,

All replies

Helpful answers

by Jean-Michel Dentand,Helpful

by Jean-Michel Dentand,Helpful