徽标在Chrome，非Firefox或IE中显示为像素化

Question

我是后端开发人员，可以使用一些CSS帮助。

我有一个仅在Chrome中显示像素化的徽标？

有没有人对此有任何建议或解决方案？

该网站是在

https://empowermetamela.com/

尝试更改CSS但在向下滚动时打破自动调整大小

CSS

#logo {
display: inline-block;
float: none;
max-height: 54%;
margin-bottom: 0;
vertical-align: middle;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
-webkit-transform: translate3d(0,0,0); 
}

img {
max-width: 100%;
height: auto; 
}

HTML

<a href="https://empowermetamela.com/">                     
  <img src="https://empowermetamela.com/wp-content/uploads/2019/04/empower-me-tamela-logo.png" alt="Empower Me ~ Tamela" id="logo" data-height-percentage="73" />
</a>

需要徽标才能在Chrome中显示流畅

Answer 1

这条线导致了这个问题：

-webkit-transform: translate3d(0,0,0); 

如果没有必要，我会将其删除。如果这不是一个选项，那么正如Pete在评论中提到的那样，这可能是SVG的一个很好的候选者和/或它的大小是宽度而不是高度。

Answer 2

您可以尝试#logo img

-ms-transform: scale(1); /* IE 9 */
-webkit-transform: scale(1); /* Safari */
transform: scale(1);

希望对你有用:)