[Bug] [0.35~0.47] The right-click menu in Apple device displays abnormally (no background)

[SuperManito]

Reproducible in vscode.dev or in VS Code Desktop?

• [X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• [X] Not reproducible in the monaco editor playground

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

No response

Reproduction Steps

No response

Actual (Problematic) Behavior

No response

Expected Behavior

No response

Additional Context

No response

[SuperManito]

Some style variables are not defined

[hediet]

Please fill out the bug report form completely and provide screenshots. Thanks!

[SuperManito]

Please fill out the bug report form completely and provide screenshots. Thanks!

[hediet]

~Unfortunately, I cannot reproduce. Can you look into what causes this?~

I can reproduce on the iPad.

[SuperManito]

~Unfortunately, I cannot reproduce. Can you look into what causes this?~

I can reproduce on the iPad.

Sorry. I can't help you analyze the code. I just report a bug. Maybe you can open this issue to get more help from community developers.

[catfan]

@haeguri Any update for this issue? This bug still exists on 0.39 and 0.40-dev.

This happened since 0.35, and 0.34.1 is fine.

We are looking forward to fixing it so that it can work on iOS, thanks!

[catfan]

Here is the screenshot of iOS Safari developer tools.

And here is the screenshot of desktop Chrome developer tools.

We can see that all CSS variables prefixed with --vscode are not applied on iOS. That causes the background color var(--vscode-menu-background) of the menu container on iOS to be transparent rgba(0,0,0,0).

[SuperManito]

Here is the screenshot of iOS Safari developer tools.

And here is the screenshot of desktop Chrome developer tools.

We can see that all CSS variables prefixed with --vscode are not applied on iOS. That causes the background color var(--vscode-menu-background) of the menu container on iOS to be transparent rgba(0,0,0,0).

Yes, I found that CSS variables have become undefined. I did not find any relevant codes in this repo.

[Nyaasu66]

Here is the screenshot of iOS Safari developer tools. And here is the screenshot of desktop Chrome developer tools. We can see that all CSS variables prefixed with --vscode are not applied on iOS. That causes the background color var(--vscode-menu-background) of the menu container on iOS to be transparent rgba(0,0,0,0).

Yes, I found that CSS variables have become undefined. I did not find any relevant codes in this repo.

The relevant codes are here: https://github.com/microsoft/vscode/blob/35573c42a59946d4ea0c5b533055f86a5585abbf/src/vs/platform/theme/common/colorRegistry.ts#L488

[ExtAnimal]

It reproduces in your own examples. Get it fixed.

[SuperManito]

It reproduces in your own examples. Get it fixed.

At present, official seems to be quite passive in addressing the issues occurring on mobile devices.

[ExtAnimal]

Please fill out the bug report form completely and provide screenshots. Thanks!

Lazy. Just go to https://microsoft.github.io/monaco-editor/playground.html?source=v0.45.0#example-extending-language-services-configure-javascript-defaults on your iPad, or with Chrome emulating an iPad:

[ExtAnimal]

At present, official seems to be quite passive in addressing the issues occurring on mobile devices.

I added a quickfix to our editor component which we use to wrap a Monaco instance:

// Workaround for https://github.com/microsoft/monaco-editor/issues/3602
// Hoist the menu background var up one level because the context menu is placed outside of the editor.
this.element.style.setProperty('--vscode-menu-background', getComputedStyle(this.element.querySelector('.monaco-editor')).getPropertyValue('--vscode-menu-background'));

[SuperManito]

目前，官方在解决移动设备上发生的问题方面似乎相当被动。

我为我们的编辑器组件添加了一个快速修复程序，我们用它来包装一个摩纳哥实例：

// Workaround for https://github.com/microsoft/monaco-editor/issues/3602
// Hoist the menu background var up one level because the context menu is placed outside of the editor.
this.element.style.setProperty('--vscode-menu-background', getComputedStyle(this.element.querySelector('.monaco-editor')).getPropertyValue('--vscode-menu-background'));

My project has scenarios for mobile use. Do you know why the monaco editor cannot long press the screen on the mobile end to summon system copy pop ups? In addition to this issue, it is also impossible to achieve cursor movement by long pressing the system keyboard space. I don't understand why the official doesn't optimize the experience of such a powerful editor on mobile devices

[catfan]

@hediet

This issue has been fixed since 0.48.0-dev-20240329. However, the 0.48.0-rc has the problem again, but 0.49.0-dev-20240423 is working.

Is it about the building problem?