UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76 Safari/537.36

Steps to reproduce the problem:
1. Create an element containing the text 'fi' 
2. Select this element (as the start and end node)
3. Create a Range object - document.createRange();
4. Set the range using setStart and setEnd as the 'f' and then 'i'
5. Observe the bounds returned from range.getBoundingClientRect();

What is the expected behavior?
1) bounds.width of 'f' and 'i' should be their own bounds (not the same)
2) bounds.left of the 'i' is expected to be the width of 'f'

What went wrong?
The bounds of 'f' and 'i' are are the same and the width covers both characters. 

Did this work before? Yes Chrome 48

Does this work in other browsers? Yes

Chrome version: 56.0.2924.76  Channel: stable
OS Version: OS X 10.11.5
Flash Version: Shockwave Flash 24.0 r0

Here is a jsfiddle which draws around the bounds to show the difference cross-browser and with other characters:
https://jsfiddle.net/jMorris676/vatxzvda/

There's also another fiddle from another (solved) issue that can demonstrate this:
https://jsfiddle.net/b1kd0fcp/ (Edit 'Hello' or 'World' to have 'fi' and try to select 'fi'

'i' and 'l' after 'f' will reproduce this.

Please let me know if this is expected (and fixed) behaviour and whether there is an alternative solution to what I'm attempting to do.