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

Steps to reproduce the problem:
1. Check this https://codepen.io/hatpick/pen/YeGMRz
2. Try to select a text block using your mouse

What is the expected behavior?
Selected text get the default selection color with no gaps

What went wrong?
Selected text has visible white gaps in the UI

Did this work before? N/A 

Chrome version: 63.0.3239.132  Channel: n/a
OS Version: OS X 10.12.3
Flash Version: Shockwave Flash 28.0 r0

This works fine on Firefox 57.0.4 and Safari Version 10.0.3 (12602.4.8) and Edge

changing span display to inline-flex, solves this issue but shows two shades of selection color (which seems like an overlap)
 

Deleted: selection bug.gif 246 KB

	selection bug.gif 246 KB View Download