[macOS][Xcode 15] Avoid using dirtyRect in drawRect:

[Saadnajmi]

Note: This doesn't 100% fix macOS SVG rendering with Xcode 15, but gets up 90% of the way there 🙏

Summary

See:

• Very strange layout on macOS Sonoma expo/orbit#30
• https://indiestack.com/2023/06/view-clipping-sonoma/
• https://developer.apple.com/documentation/macos-release-notes/appkit-release-notes-for-macos-14#NSView

Apple made a breaking change in Xcode 15 / macOS Sonoma which breaks usages of drawRect:. You can no longer trust that the OS will provide you a dirtyRect will be within the bounds of your view. Specifically (from the appkit release notes):

Filling the dirty rect of a view inside of -drawRect. A fairly common pattern is to simply rect fill the dirty rect passed into an override of NSView.draw(). The dirty rect can now extend outside of your view’s bounds. This pattern can be adjusted by filling the bounds instead of the dirty rect, or by setting clipsToBounds = true.

This led to an unfortunate bug where any SVG drawn took up the full width/height of your window. Let's follow Apple's advice and draw using [self bounds] instead of dirtyRect.

Test Plan

I built our FluentUI React Native test app with and without the one line change on Xcode 15. Notice how without the change, the chevron that is otherwise in the top right dropdown takes up the whole window.

Before:

After:

Checklist

• I have tested this on a device and a simulator
• I added documentation in README.md
• I updated the typed files (typescript)
• I added a test for the API in the __tests__ folder

[Saadnajmi]

Probably worth sanity checking both macOS and iOS test apps in this repo, but I wanted to get this review out ASAP as we're close to macOS Sonoma release

[Saadnajmi]

Testing against the example in the repo, it seems Images still render weird :(

[WoLewicki]

@Saadnajmi so currently it still does not work correctly in case of Image component? Did you spot any other issues?

[Saadnajmi]

@Saadnajmi so currently it still does not work correctly in case of Image component? Did you spot any other issues?

No, just that one. I'll spend today trying to figure that one out but given that macOS Sonoma / Xcode 15 is impending, I may just ask to go with the one line change so we fix the 90% case 😅

[Saadnajmi]

@WoLewicki It looks like there will be some deeper debugging needed to understand just how much breaks with Xcode 15, as it seems more stuff related to clipping is broken :/. In the meantime, can we merge this change as it doesn't seem to affect iOS and gets us most of the way there?

iOS screenshots:

[anandrajeswaran]

Is this the issue? Shouldn't this be set to [self bounds]?

[Saadnajmi]

That didn't seem to have any effect in my testing.

The remaining issue I found is that SVG images will still render with a large width/height and not properly clip. Tracing the callstack , I got the issue to to this method in RNSVGGroups.mm:

- (void)setupGlyphContext:(CGContextRef)context
{
  CGRect clipBounds = CGContextGetClipBoundingBox(context); <----
  ....
}

CGContextGetClipBoundingBox returns an abnormally large box. My next step is to compare what it returns when compiled against Xcode 14/macOS 13

[sivakusayan]

Did you ever figure out what was going on for your case? We were seeing a similar issue where SVGImages weren't rendering properly, except for us CGContextGetClipBoundingBox at that point was abnormally small, with width and height of 1.

I'm not too familiar with Apple APIs, but the farthest I got was noticing that the abnormal context came from the call to UIGraphicsGetCurrentContext. Before I could investigate further, we suddenly started getting reasonable bounding boxes and I was no longer able to reproduce 😕.

[Saadnajmi]

I did not get any further. Might be worth filing a Github issue to track. I'm curious what your use case is?

[sivakusayan]

We're loading an image and then drawing annotations that a user specified using SVGs, basically.

I'll try to file another issue once we start seeing it again, but it unfortunately (fortunately?) seems to work on my machine™.

[Saadnajmi]

FWIW, the method you linked is a UIKit (aka, iOS only) method we shim on macOS: https://github.com/microsoft/react-native-macos/blob/2fe53e8050a9c0b0906c0e092764ffdebcc039d4/packages/react-native/React/Base/macOS/RCTUIKit.m#L29-L32

I've been meaning to revisit some of these shims, but ultimately I think it would call the same underlying NSGraphicsContext code. I couldn't find any apple docs about CGContextGetClipBoundingBox changing, but It very much feels like this method also had a breaking change with Xcode 15 / the macOS 14 SDK.