Bizarre ligature-cursor issue in text inputs/areas

[peterthenelson]

Description

Cursor appears not to move when arrowing through ligatures.

Expected outcome

(After following repro steps:) Cursor goes between the "f" and the "i".

Actual outcome

Cursor appears to be to the right of the the "fi", but if you start typing, it suddenly appears where you would expect it to. Presumably this has to do with "fi" being combined into a ligature in some fonts?

Live Demo

The demo page works fine:
https://www.webcomponents.org/element/PolymerElements/paper-input

Steps to reproduce

• Go to demo for paper-input: https://www.webcomponents.org/element/PolymerElements/paper-input
• Put cursor in either the "Floating label" or "username" fields.
• Type "fi".
• Use left-arrow to attempt to position cursor between the "f" and the "i".

Browsers Affected

This happens both on google corp desktops (linux) and corp laptops (mac). Didn't test anything else.

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

[bicknellr]

I don't think this is an issue with paper-input thing but it seems related to https://crbug.com/681987 - so probably either a Blink or Roboto bug. You can repro with just this:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<input style="font: 32px Roboto;" value="flflflflfl">