Bug 265480

Summary: Second div within a rotated and overflow:hidden parent div does not render
Product: WebKit Reporter: Jonathan Deutsch <jonathan>
Component: CompositingAssignee: 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:
Description Flags
Incorrect rendering from Safari
none
Correct rendering from Chrome
none
Simple reproduction HTML none

Jonathan Deutsch
Reported 2023-11-28 14:59:39 PST
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.
Attachments
Incorrect rendering from Safari (226.87 KB, image/png)
2023-11-28 14:59 PST, Jonathan Deutsch 		no flags
Details
Correct rendering from Chrome (281.20 KB, image/png)
2023-11-28 15:00 PST, Jonathan Deutsch 		no flags
Details
Simple reproduction HTML (334 bytes, text/html)
2023-11-28 15:00 PST, Jonathan Deutsch 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Jonathan Deutsch
Comment 1 2023-11-28 15:00:02 PST
Created attachment 468795 [details] Correct rendering from Chrome
Jonathan Deutsch
Comment 2 2023-11-28 15:00:19 PST
Created attachment 468796 [details] Simple reproduction HTML
Radar WebKit Bug Importer
Comment 3 2023-11-28 15:03:57 PST
<rdar://problem/118901069>
Jonathan Deutsch
Comment 4 2023-11-28 15:05:10 PST
This affects users of the mac app, Tumult Hype: https://tumult.com/hype/
Karl Dubost
Comment 5 2023-11-28 16:57:48 PST
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
Karl Dubost
Comment 6 2023-11-28 17:05:36 PST
Ah yes -90deg is not working either. It must have been a glitch with changing values with the Web Inspector.
Matt Woodrow
Comment 7 2023-11-29 16:24:06 PST
Pull request: https://github.com/WebKit/WebKit/pull/21080
EWS
Comment 8 2023-12-11 12:14:21 PST
Committed 271894@main (cc12d007e2e9): <https://commits.webkit.org/271894@main> Reviewed commits have been landed. Closing PR #21080 and removing active labels.
Note You need to log in before you can comment on or make changes to this bug.