Skip to content

Cursor position cannot be changed via touch, if embedded in AppleWebKit on an iPhone whose user-agent does not include 'chrome' and 'safari' #212484

@CookieeQuinn

Description

@CookieeQuinn

Does this issue occur when all extensions are disabled?: Yes

  • monaco-editor version: 0.45.0(5e5af013f8d295555a7210df0d5f2cea0bf5dd56)
  • Browser: AppleWebKit
  • OS Version: iPhone OS 16_3_1 like Mac OS X
  • User-Agent:Mozilla/5.0 (iPhone; CPU iPhone OS 16_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148/0.1.0/Mobile_Lunar/4.3.8/codemao

Steps to Reproduce:
The issue can be reproduced as long as:

  1. Ensure to use the Monaco editor embedded in AppleWebKit on an iPhone, ensuring that the user agent does not contain the word "Macintosh" but includes "AppleWebKit".
  2. Make sure the user agent does not contain the word "safari" or "chrome".

When embedded in AppleWebKit on an iPhone, the usability of the Monaco editor is severely compromised. You can only focus into the editor, seeing the cursor blinking at the beginning of the first line, and cannot change the cursor to other positions in the rows and columns (which also means you cannot select text, etc.).

However, it works fine in Google Chrome, Safari, or on Mac and Android devices. I found the following related issues and fixed the problem by adding 'user-select: auto':

I'm raising this issue mainly to inquire whether the official team has considered adding the 'enable-user-select' class when the user-agent 'isWebkitWebView'. Could you please provide some insights into the reason behind this decision? Thank you very much! @alexdima

Here are some details about this issue:

By debugging the relevant source code (_actualDoHitTestWithCaretRangeFromPoint), I found that after the user touches the screen, when the editor performs hit testing, the range returned by the caretRangeFromPoint method is null. Therefore, the hit test ultimately returns null, and we cannot obtain information about the hit object.

This results in the inability to change the cursor position.

Upon further inspection of the source code, it was found that when running in an environment where the user agent contains the words 'Safari', 'Chrome', or 'Macintosh', it works fine.

// microsoft/vscode/src/vs/editor/browser/config/editorConfiguration.ts

function getExtraEditorClassName(): string {
	let extra = '';
	if (!browser.isSafari && !browser.isWebkitWebView) {
		// Use user-select: none in all browsers except Safari and native macOS WebView
		extra += 'no-user-select ';
	}
	if (browser.isSafari) {
		// See https://github.com/microsoft/vscode/issues/108822
		extra += 'no-minimap-shadow ';
		extra += 'enable-user-select ';
	}
	if (platform.isMacintosh) {
		extra += 'mac ';
	}
	return extra;
}

// microsoft/vscode/src/vs/base/browser/browser.ts

export const isFirefox = (userAgent.indexOf('Firefox') >= 0);
export const isWebKit = (userAgent.indexOf('AppleWebKit') >= 0);
export const isChrome = (userAgent.indexOf('Chrome') >= 0);
export const isSafari = (!isChrome && (userAgent.indexOf('Safari') >= 0));
export const isWebkitWebView = (!isChrome && !isSafari && isWebKit);
export const isElectron = (userAgent.indexOf('Electron/') >= 0);
export const isAndroid = (userAgent.indexOf('Android') >= 0);

Metadata

Metadata

Assignees

Labels

bugIssue identified by VS Code Team member as probable bugios-ipadosverifiedVerification succeeded

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions