Root-level perspective transform causes blurry Popups and Flyouts

[aschultz]

PopupViewManager and FlyoutViewManager attempt to work around a z-index shadowing issue by forcing a translation along the Z axis. This interacts poorly with the PerspectiveTransform3D set on the React root view (ReactControl), causing Popups and Flyouts to scale and text to become blurry as their Z position increases.

The code in ReactControl.cpp and ReactRootControl.cpp says:

    // Xaml's default projection in 3D is orthographic (all lines are parallel)
    // However React Native's default projection is a one-point perspective.
    // Set a default perspective projection on the main control to mimic this.

However, while React Native's "transform" property supports a perspective setting, its not required. An orthographic transform should be possible.

I suspect this root-level transform should be removed in favor of components independently setting perspective if needed.

[chrisglein]

Hacky workaround exists to unblock partner (to remove the transform), not desirable. This is preventing them from deforking some files.

This needs some thought into what the right fix is.
Composition doesn't support opting out of perspective in a scoped way.
Or only add perspective to components that use a "true" 3D transform.
Is it possible to show under a different root than the one we're using?

[aschultz]

@chrisglein The TransformMatrix property that FrameworkElementViewManager uses to apply React transforms accepts a 4x4 matrix. Is that not sufficient for performing 3D transforms? Why is the root level PerspectiveTransform3D needed?

[chrisglein]

@chrisglein The TransformMatrix property that FrameworkElementViewManager uses to apply React transforms accepts a 4x4 matrix. Is that not sufficient for performing 3D transforms? Why is the root level PerspectiveTransform3D needed?

I'll let @kmelmon weigh in here as he had the expertise at the triage meeting today.

[chrisglein]

@chrisglein The TransformMatrix property that FrameworkElementViewManager uses to apply React transforms accepts a 4x4 matrix. Is that not sufficient for performing 3D transforms? Why is the root level PerspectiveTransform3D needed?

I'll let @kmelmon weigh in here as he had the expertise at the triage meeting today.

[kmelmon]

Discussed with George Gao.

I said:
Hey George,

We have an issue in react-native:
#4466 (comment)

The problem here is that in react-native, there’s a transform property which can be 3D. It’s expected to have perspective automatically applied by the native platform. We map this property to the XAML TransformMatrix property. But of course XAML doesn’t provide perspective by default, so these transforms end up with an orthographic projection, which is inconsistent with what the other platforms do. To fix this and be consistent with other platforms, we added a default perspective transform on the root of the entire react-native tree.

Now for the fun part… This perspective transform is causing issues for shadow-casting elements, which put a Z translation on themselves. These elements really shouldn’t have perspective applied to them, as it moves them closer to the user’s eye. It also causes text to render blurry as the text rendering code is apparently not smart enough to account for perspective.

I’m trying to figure out how to meet both requirements. One idea is to detect that an element has 3D in its transform, and only in this case, add perspective to just that element’s overall transform (we control the XAML transform completely and it’s not visible to the app).

So in a case like this:

Popup would not get any perspective.
DudeWith3D would get a perspective.

Of course this isn’t a perfect solution but might be good enough.

Another idea would be to force Popups to be windowed, as I think in this case we won’t apply any perspective to it.

Do you have any other ideas?

And George said:

Sounds like popups use a Z translation as an implementation detail of shadows, and this detail is leaking when putting perspective on the tree.

Does react-native on Xaml care about shadows in its popups? Is there a way to opt out of shadows and the Z translation?

Otherwise doing what you suggest is the workaround. It can get tricky because if someone has a popup under their 3D content, they’ll see a perspective on their popup again. We’ll also have to do bookkeeping to make sure we don’t double-apply a perspective.

Another thing that you can try playing with – what happens if there’s a flattening transform above the popup (Z scale = 0). That will remove the perspective (along with all 3D) in that subtree, but does it prevent the shadow from showing as well?

[lamxdoan]

As an FYI, we are seeing this issue with Combobox as well since it looks like it's using a popup.