Created attachment 468794 [details] Incorrect rendering from Safari The following code does not render properly: <div style="transform: rotateZ(270deg); height: 78px; overflow: hidden; width: 76px;"> <div style="position: absolute; transform: rotateY(0deg); height: 151px; width: 151px; background-color: red;"></div> <div style="position: absolute; left: 18px; top: 18px; height: 114px; width: 114px; background-color: blue;"></div> </div> Please see attached screenshots. It should be a red div with a blue div in the upper right corner. Safari does not render the blue div. Changing the rotateZ to 0-89deg, or removing the overflow:hidden, or removing the rotateY(0deg) on the first div will make it render correctly. This was reproduced on Safari Technology Preview - Release 183 (Safari 17.4, WebKit 19618.1.5.2). It also happens on the latest iOS 17 beta. I didn't try earlier builds, but based on a bug report I'm pretty sure it is also happening in the current releases of macOS 14.1/Safari at least. It renders correctly in Chrome and Firefox.
Created attachment 468795 [details] Correct rendering from Chrome
Created attachment 468796 [details] Simple reproduction HTML
<rdar://problem/118901069>
This affects users of the mac app, Tumult Hype: https://tumult.com/hype/
Indeed. Confirmed. on STP 183. This is working with ``` div { transform: rotateZ(-90deg); height: 78px; overflow: hidden; width: 76px; } ``` I wonder if it's because 270deg is special. Ah no. This is different. Let's start with: rotateZ(0deg) There's a blue square but in the bottom right. visible: from 0deg to 169deg invisible: from 170deg to 281deg visible: from 282deg to 360deg
Ah yes -90deg is not working either. It must have been a glitch with changing values with the Web Inspector.
Pull request: https://github.com/WebKit/WebKit/pull/21080
Committed 271894@main (cc12d007e2e9): <https://commits.webkit.org/271894@main> Reviewed commits have been landed. Closing PR #21080 and removing active labels.