Safari: Is there a workaround for the Safari CSS print positioning bug?
Question
For the latest versions of Safari for macOS (13.0.3) as well as for iOS (iOS 13.4.1), there's a bug that affects CSS positioning of an object at the bottom of a page – but only for printing .
As an example, 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 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.
Positioning 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 there any known workaround?
1 answers
solution1
0 2020-04-28 19:16:48
Try this code
@media print { * { page-break-after: always; } }
<div style="height: 100vh"> <div style="position:absolute; left:0px; width: 100%; display: block; bottom:0px; page-break-after: always; height:100px; background-color: green;"></div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.