Web: Markdown Preview scrolling not synced on iPadOS

[rebornix]

Re #83296

• Run self hosting bits in iPadOS
• Open a markdown file which is longer than one page
• Open preview to the side
• Scrolling in the preview doesn't sync with the editor

[isidorn]

I just tried this out with lates to double check that it is still not working. It would be cool if we could get this working, since I see markdown reading as a very important scenario for the iPad. @mjbvz can I provide some more information so we get some progress on this? Can I help somehow here? Does it make sense to assign to May so we investigate together in debt week?

[mjbvz]

I don't have an iPad to test on right now but the key place to look is:

https://github.com/microsoft/vscode/blob/d5f4e119e058e1d01ec4f994f757703348c37db8/extensions/markdown-language-features/preview-src/index.ts#L209

This should be hit inside of the webview whenever you scroll the preview.

There's some comments here that discuss some things we can try

[isidorn]

@mjbvz Thanks for the pointer, I will take a look in May and let you know what I find out.

[isidorn]

@mjbvz I have looked into this a bit and two issues I hit. When I run yarn web and just connect to that the markdown preview does not work because of the error. Is there any workaround for this?

Also I believe that code you pointed is running in the extension host, and I do not know how to debug the extension host on the iPad. Though what I want to do is to just make code changes try them out quickly using yarn web, but unfortunately that fails due to the error.

However when I open codespaces on the iPad this works, so only yarn web seems to be the problem.

[Error] Error while parsing the 'sandbox' attribute: 'allow-downloads' is an invalid sandbox flag.
    createElement (webviewElement.js:56)
    BaseWebview (baseWebviewElement.js:86)
    IFrameWebview (webviewElement.js:20)
    _createInstance (instantiationService.js:90)
    createInstance (instantiationService.js:61)
    createWebviewElement (webviewService.js:34)
    createWebviewElement
    show (dynamicWebviewEditorOverlay.js:141)
    claim (dynamicWebviewEditorOverlay.js:91)
    claimWebview (webviewEditor.js:118)
    (anonymous function) (webviewEditor.js:110)
    asyncFunctionResume
    (anonymous function)
    promiseReactionJobWithoutPromise
[Error] Unrecognized Content-Security-Policy directive 'require-trusted-types-for'.

[Error] Unhandled Promise Rejection: Error: Service Workers are not enabled in browser. Webviews will not work.
    (anonymous function)
    rejectPromise
    rejectPromiseWithFirstResolvingFunctionCallCheck
    asyncFunctionResume
    Promise
    Module Code (main.js:194)
    evaluate
    moduleEvaluation
    moduleEvaluation
[Error] Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'navigator.serviceWorker.addEventListener')
    (anonymous function) (main.js:266)
    asyncFunctionResume
    Module Code (host.js:106)
    evaluate
    moduleEvaluation

[isidorn]

@mjbvz friendly ping for my questions from above

[mjbvz]

Hm, the Service Workers are not enabled in browser. explains why you don't see anything. The other errors probably don't cause problems (although I will see if I can test that on my phone)

I suspect that service workers are not enabled on localhost on iOS. You may need an https enabled server to test this out, see https://stackoverflow.com/a/34161385/306149

[isidorn]

@mjbvz thanks but none of those advanced settings are available on the iPad. So I can not change this on the iPad browsers. Is there something else I could do? In latest I actually do not get the errors from above, but once I trigger open preview to the side I get an error command markdown.showPreviewToSide not found like the markdown extension is not even registered.

[mjbvz]

@isidorn Sorry I can't debug this on my phone and don't have an iPad with keyboard to test with

For testing, can you try serving your vscode web build over a service like ngrok so that it has a standard https url?

No idea why the open to side command is not working though. Are there any other errors that you see?

[isidorn]

Just tried with ngrok however it has a request limit of basic accounts so does not really work for this use case since none of the files in the explorer seem to load. There are no other errors, except that command markdown.showPreviewToSide can not be found.

[mjbvz]

@TylerLeonhardt Adding you as our resident iPad expert :)

[TylerLeonhardt]

"expert" is used very very liberally here. I just have an iPad and worked on a couple of small issues :) no suggestions come to mind. Would need more investigation. @rebornix not sure if you have any thoughts.