Forum Bugs

CSS transform:translate behavior is incorrect

pepelsbey
Steps to reproduce:

Print page below

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style>
		@page {
			margin:0;
			size:500px 500px;
			}
		body {
			margin:0;
			padding:0;
			background:#FFF;
			}
		div {
			width:250px;
			height:250px;
			background:#C00;
			-webkit-transform:translate(50%, 50%);
			-moz-transform:translate(50%, 50%);
			-ms-transform:translate(50%, 50%);
			-o-transform:translate(50%, 50%);
			transform:translate(50%, 50%);
			}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

Expected behavior:

Red square right in the middle of 500x500 px page (like rendered in all browsers with CSS transform support)

Actual behavior:

Red square half-hidden at the top, shifted to the right.
  1. transform.pdf1.8 kB
    Result PDF
mikeday
Thanks for the test document, it looks like the vertical offset is being inverted. We will investigate this issue.
mikeday
We have fixed this issue in Prince 8.1 rev 4, available for download now. Thanks for letting us know! :)