RedNotebook

  1. Bug #822537
  2. Comment #30

Comment 30 for bug 822537

Revision history for this message
In , Hus-buy (hus-buy) wrote :

BUG: "page-break-inside: avoid"

There is a bug for Chrome when div elements are in a "table".
Try the code below, and you will see :
   - at pages 3,9 and 15: some unexpected space between first and second div;
   - at pages 4,10 and 16: some unexpected space between second and third div;
   - at pages 5,11 and 17: only 2 divs are visible instead of 3;

There is a cyclic behavour every 6 pages.

Thank you.

**********************************************************
<html>
 <head>
  <style>
   table {
    width: 100%;
   }
   div {
    height: 270px;
    border: solid 2px;
    margin-bottom: 10px;
    page-break-inside: avoid;
   }
  </style>
 </head>
 <body>
  <table><tbody>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
   <tr><td><div>Hello</div></td></tr>
  </tbody></table>

 </body>
</html>