MAUI WebView does not execute JS chart lib function on Mac

[linkaiyu]

Description

in a MAUI app, the WebView points to a customer URL where a html file contains the JS lib for displaying chart.
this chart displays and the tools for the chart such as draw a line/arrow/heart etc works properly when the runs on windows, but the chart tools don't work on Mac

Steps to Reproduce

1. down load the repro app, build and run.
2. after the app start, when you see the hour glass in the middle of the screen where the WebView control is, Click the button "Execute JS in WebView"
3. on windows, the stock price chart for AAPL will display and you can use the tools menu such as draw line/arrow/heart, change chart format to candle/line/ etc.
4. run the app on Mac, and observe the chart tools behavior. they just don't work
5. in the code behind .cs file, there is comment and JS code that can be directly executed in the Developers Tools console to demonstrate that the chart JS lib works in Safari, so as to rule out the problem with JS lib.

Link to public reproduction project repository

https://github.com/linkaiyu/Maui-WebViewTest

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

macOS

Affected platform versions

maccatalyst 12 and up

Did you find any workaround?

no workaround

Relevant log output

no

[drasticactions]

I created a .NET Catalyst app with a WKWebView and set it to use the site and Javascript you listed, and the chart loaded.

I then ran your sample and got the same result, is this correct?

[drasticactions]

Rereading your issue, I tried the draw commands, and they did not work. But they don't work in my Mac Catalyst example as well. It appears your issue is with the underlying WKWebKit control.

2023-04-05.16.22.31.mov

[fidofitzy]

@drasticactions when you tried drawing, were you just clicking the menu item, or did you click inside the chart body? Drawing tools usually work by one click in the chart body then moving mouse to another position and clicking again- I can't tell from watching the video above. My video below is showing it work properly in PC

chartdrawingonPC.mp4

[linkaiyu]

@drasticactions, reviewing your video, yes, your observations are correct.
I went thru your WebViewTest that uses the UIKit to create the WKWebView. If you observe the same behavior, then it does look like the issue is with underlying WKWebKit.
So what would be the next steps from here? Since the chart lib works from Safari, what is the difference here? Does Safari use WKWebKit? (excuse my ignorance on Mac/iOS etc)
@fidofitzy @mikeparker104 @faustmet @bieri

[drasticactions]

@linkaiyu I'm not sure yet.

I wrote a test in Swift (https://github.com/drasticactions/MauiRepros/tree/main/WebViewChartTest) to ensure this was, for sure, a root Mac Catalyst issue and I can reproduce it there: It works on iOS on the iPhone and iPad; but fails in Catalyst. Moreover, I tried it on macOS in AppKit (The macOS-only UI Platform, Mac Catalyst is based on UIKit and used by MAUI for the base of its stack for Mac), which also includes WKWebView. Frustratingly, your code works in AppKit WKWebView just fine, I could click and draw elements, and it appears to work fine.

Even more frustrating, while there are Developer Tools you can hook into the underlying webview and let you debug it from Safari, I need help getting them to run in Catalyst. They work in iOS and MacOS AppKit, but Mac Catalyst refuses to work. However, I don't think anything is broken in your code. Looking at the behavior in AppKit and Catalyst, I think whatever is being used to track mouse movements isn't working correctly in the Catalyst version. Since it works on iOS and AppKit, it's seems like a Catalyst-specific bug. There may be something you could do to work around it in your code (Granted, not having the Safari Developer Tools, which also seems like a bug in Catalyst, makes that hard to do when it works everywhere else). We need to go to Apple to help debug and fix this.

@Eilon What do you think?

[drasticactions]

In terms of WKWebView itself, as far as I understand it: It's the standard base for WebView controls in macOS and iOS. It's based on WebKit, but it's not directly "Safari running in a NS/UIView". Having your code work in Safari does not mean it will work in WKWebView. In this case, I don't think the underlying webview code is the problem (Considering it works in Safari proper, and iOS and macOS AppKit in WKWebView), it feels like it's whatever NS/UIView wrapper Apple wrote for Catalyst to wrap that view is causing issues with whatever Javascript trackers you have on the mouse movement.

We've hit issues in the past with that WebView having odd behavior (#13934) so it wouldn't surprise me if that's happening here. That said, I don't know for sure, this is just my current theory. I do feel confident in saying this is not a MAUI UI issue though, it's a fundamental Catalyst issue.

[fidofitzy]

@prerakpatel2

[linkaiyu]

@drasticactions , I think you are right on spot with our observations. Fidelity customizes the chartiq lib and they may hit a spot that does not work. Comparing with the chartiq demo, the chart works on MacCatalyst. I updated the repro with the webview that points to https://demo.chartiq.com so that you can see the two chart behavior side by side now

[linkaiyu]

@drasticactions, @mikeparker104, @Eilon,
Customer is investigating their implementation of chart JS code. MS can pause work until we hear back from customer.

[drasticactions]

@linkaiyu Thank you for the update.

I also just saw through another bug that there is a way to inspect WebViews in Catalyst again.

#7706 (comment)
https://developer.apple.com/documentation/webkit/wkwebview/4111163-isinspectable

There is a new isInspectable flag for WKWebView. It's only in 16.4+ SDKs and is bound for the next Xamarin.MaciOS Update (Whenever Xcode 14.3 support lands, if it's not out already). If you can't update the SDK, or it's not out yet, the selector on that comment should work. Trying it locally, it worked for me.

That should help debug this issue.

[jinxinjuan]

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 2.0. Can repro on macOS with sample project. Maui-WebViewTest

[hartez]

@drasticactions, @mikeparker104, @Eilon, Customer is investigating their implementation of chart JS code. MS can pause work until we hear back from customer.

@linkaiyu Any updates on this? Is there anything more we can do to help?

[ghost]

Hi @linkaiyu. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.