为什么黄色/白色背景弄乱了我的图像？

Question

我正在使用我在图像背景上设计的徽标图像。每当背景包含黄色/白色颜色时，我的徽标就会变成红色像素。

此处的代码：jsfiddle

<div style="background-color:black;">
  <img src="https://i.ibb.co/DrNSqdq/logostern.png" height="100px">
</div>
<div style="background-color:red;">
  <img src="https://i.ibb.co/DrNSqdq/logostern.png" height="100px">
</div>
<div style="background-color:yellow;">
  <img src="https://i.ibb.co/DrNSqdq/logostern.png" height="100px">
</div>
<div style="background-color:white;">
  <img src="https://i.ibb.co/DrNSqdq/logostern.png" height="100px">
</div>
<div style="background:url('https://images-na.ssl-images-amazon.com/images/I/61IxMLc8xHL._SX425_.jpg');">
  <img src="https://i.ibb.co/DrNSqdq/logostern.png" height="100px">
</div>

在黑色/红色背景上，一切看起来都很好。在白色/黄色背景上，出现奇怪的红色像素。

保存图像时我做错了什么吗？

编辑：谢谢大家的回答。问题确实出在我的电脑上。问题仅在Chrome上，在Mozilla上一切正常。我的图形驱动程序肯定有问题。

Answer 1

我认为这是系统图形处理器或浏览器的问题。 因为在我的末端我可以看到它很好。