Bug 269758 – REGRESSION (Safari 16.4): Applying transforms via the matrix3d does not properly rotate the 3D objects

• Status: NEW
• Component: Layout and Rendering

Created attachment 469977 [details]
On the left is the view Firefox (Same output as Chrome). On the right is the view in Safari revealing the issue described above.

Applying transforms via the matrix3d does not properly rotate the 3D objects. Instead of values being rotated, Safari renders no visible elements when given specific transforms.

I also noticed that applying a perspective in combination with some transforms does not properly show the correct perspective (at least on version 17.2). To demonstrate these inconsistencies, I generated a CodePen that displays the varied results.

https://codepen.io/Madison-Ehlers/pen/mdogdjB


At the top of the example, there is a working demonstration that shows Safari is handling this properly in some cases.

The other examples highlight discrepancies between other browsers:

1. Perspective Broken: In Chrome and Firefox, the other cube colors bleed through the edges, but in Safari, nothing is visible behind the face.
     Note: In the .broken-perspective CSS class, there is a comment indicating that applying the transform from the working example seems to properly show the expected perspective. Without it, the perspective does not work.

2. Yellow Side: In Chrome and Firefox, the yellow side of the cube is shown, but in Safari, nothing is visible.

3. Pink Side: In Chrome and Firefox, the pink side of the cube is shown, but in Safari, nothing is visible.


For additional context, I began investigating this because we have an implementation of a view cube that utilizes these base CSS properties (perspective, transform-style, transform, etc.), and it has been broken since Safari Version 16.3. I am currently using version 17.2.

For clarification, version 16.3 of Safari was functional, and the problem we first noticed emerged in version 16.4.

An additional observation our team made was that this problem does go away for both the CodePen example I sent over and our internal implementation of the view cube when we uncheck the Safari Feature Flag "CSS 3D Transform Interoperability".

[Radar WebKit Bug Importer]

<rdar://problem/123527302>

[Karl Dubost]

Created attachment 470194 [details]
rendering in safari, firefox, chrome

Madison thanks for the bug report.

The good news that this seems to have been solved. 
Safari Technology Preview  189           19619.1.3.2
Firefox Nightly            125.0a1       12524.3.5
Google Chrome Canary       124.0.6338.0  6338.0

Created attachment 470208 [details]
CSS 3D Transform Interoperability bug - version 17.4 build 19619.1.3.2

I was still able to reproduce using the Safari Technology Preview using Safari 17.4 build 19619.1.3.2. Attached is a screenshot of the view I see on this version of Safari. 

If I uncheck the CSS 3D Transform Interoperability Feature Flag, everything renders as I expect. But that Feature Flag is checked by default.

[Ahmad Saleem]

(In reply to madison.ehlers from comment #5)
> Created attachment 470208 [details]
> CSS 3D Transform Interoperability bug - version 17.4 build 19619.1.3.2
> 
> I was still able to reproduce using the Safari Technology Preview using
> Safari 17.4 build 19619.1.3.2. Attached is a screenshot of the view I see on
> this version of Safari. 
> 
> If I uncheck the CSS 3D Transform Interoperability Feature Flag, everything
> renders as I expect. But that Feature Flag is checked by default.

@Madison - can you confirm, if it is still reproducible and if yes, whether it is on Ventura or Sonoma?

Appreciate if you can share more details.