Minimal test case for a weird Chrome bug

1. Open the Chrome dev tools and select the empty span in the element inspector.
   
2. Click the "click here" link above
3. Observe that the span appears with black background as expected, but is pushed over to the left
   
4. Untick the position:relative which is inherited from p in the Styles pane of the element inspector and see the span jump to the middle of the page (which is where it should be)
   
5. Retick the position:relative to re-apply it and see that the span stays in the middle of the page, which is where it should have been in the first place.
   

As far as I can tell, this is a WebKit/Blink layout bug. The span's attributes are transitioned; if they aren't transitioned, then the bug doesn't arise. I don't think that the position:relative has anything particularly to do with it; unticking and reticking that just causes Chrome to recompute where stuff should be, and actually get it right this time.