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

Question

Sean Ki Author

Level 1

0 points

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:42 AM

Reply

Answer 1

Best reply

Jean-Michel Dentand

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

Answer 2

Sean Ki Author

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

Answer 3

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

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

Reply

Answer 4

Sean Ki Author

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

Answer 5

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

Answer 6

Sean Ki Author

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

Answer 7

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

My mistake!

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

Reply

Answer 8

Sean Ki Author

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

Answer 9

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

Answer 10

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

Answer 11

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

<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

Answer 12

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