| Summary: | Second div within a rotated and overflow:hidden parent div does not render | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Jonathan Deutsch <jonathan> | ||||||||
| Component: | Compositing | Assignee: | Matt Woodrow <mattwoodrow> | ||||||||
| Status: | RESOLVED FIXED | ||||||||||
| Severity: | Normal | CC: | karlcow, mattwoodrow, simon.fraser, webkit-bug-importer | ||||||||
| Priority: | P2 | Keywords: | BrowserCompat, InRadar | ||||||||
| Version: | Safari Technology Preview | ||||||||||
| Hardware: | All | ||||||||||
| OS: | macOS 14 | ||||||||||
| Attachments: |
|
||||||||||
Created attachment 468795 [details]
Correct rendering from Chrome
Created attachment 468796 [details]
Simple reproduction HTML
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. |
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.