Issues with position:relative

#26772

Hello,

I’m testing newest pd4ml version downloaded today and have two problems with setting relative position.

1. combining position:relative with overflow:hidden
In first example i define div.page to have 200px height and hidden overflow. There is more content and it’s hidden properly, but part of first page is rendered on top of second page. If You’ll remove “position:relative” from div.page styling, problem is gone. But this is only test case for more complicated design I have and I need relative positioning there so removing it is not a solution.

Html:
[language=html:3n4q9bqm]

Page one

Lorem ipsum dolor sit amet, consectetur adipisicing elit.Proin nibh augue, suscipit a, scelerisque sed,
lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra
nisi, in interdum massa nibh nec erat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.Proin nibh augue, suscipit a, scelerisque sed,
lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra
nisi, in interdum massa nibh nec erat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.Proin nibh augue, suscipit a, scelerisque sed,
lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra
nisi, in interdum massa nibh nec erat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.Proin nibh augue, suscipit a, scelerisque sed,
lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra
nisi, in interdum massa nibh nec erat.

Page two

Lorem ipsum dolor sit amet, consectetur adipisicing elit.Proin nibh augue, suscipit a, scelerisque sed,
lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra
nisi, in interdum massa nibh nec erat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.Proin nibh augue, suscipit a, scelerisque sed,
lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra
nisi, in interdum massa nibh nec erat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.Proin nibh augue, suscipit a, scelerisque sed,
lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra
nisi, in interdum massa nibh nec erat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.Proin nibh augue, suscipit a, scelerisque sed,
lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra
nisi, in interdum massa nibh nec erat.

[/language:3n4q9bqm]

2. child with position:absolute
Second example have div with size 400×200 and two smaller divs 190×190 each placed inside bigger div with absolute positioning. It works, but only on first page. When I copy same html to second page, there is only 400×200 container div. Two smaller divs are rendered on first page.

Html:

[language=html:3n4q9bqm]

first

second

first

second

[/language:3n4q9bqm]

OS:
Win7
Java:
java version “1.7.0_05”
Java(TM) SE Runtime Environment (build 1.7.0_05-b05)
Java HotSpot(TM) 64-Bit Server VM (build 23.1-b03, mixed mode)

Commands I use for generating PDF’s:

java -cp pd4mlpd4ml_demo.jar Pd4Cmd file:test-overflow.html 900 -out test-overflow.pdf -insets 5,5,5,5,mm
java -cp pd4mlpd4ml_demo.jar Pd4Cmd file:test-absolute.html 900 -out test-absolute.pdf -insets 5,5,5,5,mm

Am I doing something wrong with these test cases, or it’s a bug in pd4ml?

#29104

The forthcoming PD4ML release fixes the issue #1 (overflow: hidden).

Unfortunately the second issue cannot be fixed with the current PD4ML architecture.

Layouts with absolute positioning + page breaks are still handled differently by different browsers in print mode – there is no common practice, accepted by every web browser vendor (as far as I know).

Some of them print absolutely positioned elements on the first page only. Some of them respect page breaks in absolute positioning coordinates, some (and PD4ML) do not. In absolute positioning model PD4ML interprets a sequence of PDF pages as a continuous space without page breaks.

The visual defects of the resulting PDF layout are caused by an attempt to combine elements, belong to different positioning schema.

I could only recommend to redesign the layout and to avoid absolutely positioned elements there.

#29105

Thank You for Your response. I will test this release as soon as it will be available. Regarding second issue, I understand the problem with this and I will take a look what can I do with my design to fix it.

[Author]

Posts