Gutenberg: Part of the word in italic covers partly letter next to it when the caret is active inside the inline boundary

[paaljoachim]

Describe the bug
Doing some of the word in italic covers over the letters beside it.

To Reproduce
Steps to reproduce the behavior:

1. Do part of the word italic and the letter beside it will perhaps also be partly covered.

Expected behavior
Not to cover the letter beside that is not italic

Screenshots

Desktop (please complete the following information):

• OS: Mac os 10.13.6
• Browser Chrome with Desktop Server
• Gutenberg version 4.1.1

[jesscga]

I tested this as well - when I added the italic text, the initial letter _was_ covered. As soon as I clicked off the word, the italic text and non-italic text were unhighlighted and visible.

Screencast here: http://cld.wthms.co/b8zQku

OS: macOS 10.13.6
Browser: Chrome Version 69.0.3497.100
Gutenberg version 4.1.1

[designsimply]

This feels like a bit of an edge case to me which may be acceptable because I noticed in @jesscga's screencast that the problem only shows up when the inline boundary is active with the caret placed inside the italic text. However, it would be good to get a second opinion so I've added the Needs Design Feedback label to see if we can get a check on that.

[karmatosed]

I feel for now in confines of what we have this could be acceptable. However, let's put to 5.0.1 and see if it can be iterated.

[azaozz]

This is "purely" a styling issue. Removing the padding and (negative) margin from selected <em> tags (and any other selected tags that have inline boundaries) seems to fix it.

Before (the last letter before the selection is not visible):

After (all letters are visible):

[paaljoachim]

Thanks for taking care of this issue @iseulde Ella!

I look forward to trying this out in the next GB version as I have seen in a few instances that the last letter gets partly covered up. Example paragraph text, caption etc.