Safari: CSS printing bug for positioning; is there a workaround?

Hi,


I’ve encountered a strange printing bug in Safari iOS 13.4 and Safari 13.1 macOS. The bug affects positioning an object at the bottom of a page.


The following HTML code should obviously draw a green area at the bottom of the page:


<!DOCTYPE html>

<html>

<body>

<div style="position:absolute; left:0px; right:0px; bottom:0px; height:100px; background-color: green;"></div>

</body>

</html>


Displaying this code as a web page in Safari works as expected. However, telling Safari to print that page results in the the green area being at the top of the PDF printing preview (or the actual print) instead of the bottom (with only part of its height being visible at all).


Other browsers print as expected.


Postioning the area at the top of the page with top:0px produces no such problems in Safari, either; it’s only the positioning at the bottom where the printing problem occurs.


Is this a known bug? Is there any known workaround?


Thanks in advance for any insight!


Uli

Replies

This is likely just a bug. Would you mind filing a ticket through Feedback Assistant or a bug through bugs.webkit.org?