Ghosting / displaced element error

I have an issue where a specific element is rendered weirdly. In the image below, the blue area is where the element should normally appear but instead it appears where the arrow is pointing to (the circular element). Sometimes, everything is the way I expect it to be, sometimes I have both the displaced icon and the correct icon and sometimes I only have the displaced icon like you see in the image.


  1. Did anyone of you experience this before?
  2. Could it be an issue of Chrome (which I use for testing)?
  3. Is there anything I can do about it?

As you can see, Chrome thinks it places the element at the correct position (indicated by the blue border) even though it ultimately doesn’t.


Could you provide some code or a codepen of this? It’s most likely a CSS issue, but I don’t know what the styling of that element is.