contenteditable=true + display:inline-block = buggy focus map

• Component: DOM
• Status: NEW ---

[Jimmy Thomsen]

This is a copy of a bug report for Chromium, but the same problem applies to Safari.
https://bugs.chromium.org/p/chromium/issues/detail?id=1232341

----

Safari: Version 14.1.1 (14611.2.7.1.6)
URLs (if applicable) : N/A
Other browsers tested:
     Chrome: Fails
    Firefox: OK - works as expected
       Edge: -

What steps will reproduce the problem?

Please go to https://jsfiddle.net/9eL02ung/10/ to reproduce the bug.
Basically a focusable editable DIV with display:inline-block gains focus when clicking on its left or right side.

What is the expected result?

That the element only gains focus when clicking on it.

What happens instead?

Element magically gains focus when clicking next to it.

Please provide any additional information below. Attach a screenshot if
possible.

Please see video demonstrating bug:
https://youtu.be/vNfLEcTcIrM

For graphics-related bugs, please copy/paste the contents of the about:gpu
page at the end of this report.

[Radar WebKit Bug Importer]

<rdar://problem/81318413>