Bug 204138 – Using text-rendering:optimizeLegibility causes IME issues (e.g. Japanese input)

• Status: NEW
• Component: Forms

[Kari Matthews]

Code Sandbox: https://codesandbox.io/s/naughty-breeze-ckzyf
Example of what the issue looks like: https://share.getcloudapp.com/yAu4edeR

To reproduce:

1) Set your language to Japanese.
2) Visit the above code sandbox in Safari.
3) Attempt to input text into the text input

If for some reason you can't see the code sandbox you can set `text-rendering:optimizeLegibility` on any input element to observe the issue.

[Radar WebKit Bug Importer]

<rdar://problem/57251318>

[Ryosuke Niwa]

On what macOS / iOS / iPadOS did you test this? 

When you say "set your language to Japanese", do you mean the language of the computer? Or adding a Japanese keyboard? Could you clarify where in the system preference on macOS or settings on iOS you're changing?

> If for some reason you can't see the code sandbox you can set `text-rendering:optimizeLegibility` on any input element to observe the issue.

Sorry, I don't understand what you mean by "can't see the code sandbox". Are you saying that as you type in Japanese, something that was previously visible go away? If so, what exactly is it?

[Kari Matthews]

Apologies if the initial report wasn't clear enough. I've tried to clear things up here.

> On what macOS / iOS / iPadOS did you test this?

Macbook pro, Mojave v10.14.6

I'm adding Japanese in System Preferences > Language and Region, not adding a Japanese keyboard. This bug wouldn't occur with a Japanese keyboard.

> Sorry, I don't understand what you mean by "can't see the code sandbox".

There's a link to a code sandbox in the bog report. I just meant if you couldn't access that link.

> Are you saying that as you type in Japanese, something that was previously visible go away? If so, what exactly is it?

The issue is with entering Japanese characters using an English keyboard. i.e. the character か (ka) is composed of the characters 'k' and 'a'. After inputting the second character ('a') the browser hangs for about 1.5 second before rendering か. As you can imagine this is a pretty bad experience for a user.

You can see a screen recording of what this look like here: https://share.getcloudapp.com/yAu4edeR

Thank you for the questions, please let me know if I can provide any more details that will be helpful.

[Ryosuke Niwa]

(In reply to Kari Matthews from comment #3)
> Apologies if the initial report wasn't clear enough. I've tried to clear
> things up here.
> 
> > On what macOS / iOS / iPadOS did you test this?
> 
> Macbook pro, Mojave v10.14.6
> 
> I'm adding Japanese in System Preferences > Language and Region, not adding
> a Japanese keyboard. This bug wouldn't occur with a Japanese keyboard.

Okay. Thanks for clarification.

> > Are you saying that as you type in Japanese, something that was previously visible go away? If so, what exactly is it?
> 
> The issue is with entering Japanese characters using an English keyboard.
> i.e. the character か (ka) is composed of the characters 'k' and 'a'. After
> inputting the second character ('a') the browser hangs for about 1.5 second
> before rendering か. As you can imagine this is a pretty bad experience for a
> user.

Ah, I see. Thanks for clarification.