即使 DevTools 正确显示按钮图标，也无法在 iPhone X 中正确呈现答案

【问题标题】：Button icon does not render properly in iPhone X even if the DevTools displays it properly即使 DevTools 正确显示按钮图标，也无法在 iPhone X 中正确呈现
【发布时间】：2021-07-23 20:03:14
【问题描述】：

我为我的应用创建了Scroll to top 按钮，当我在 Chrome 和 Safari DevTools 中对其进行测试时，它在所有设备中都能正确显示：

但是，当我在 iPhone X 中打开它时，按钮内的图标无法正确显示（即使 Chrome 和 Safari DevTools 显示 iPhone X 会正确显示它）：

这里是HTML：

<div class="scroll-to-top" [ngClass]="{'show-scrollTop': windowScrolled}">
  <button class="scroll-to-top-button" (click)="scrollToTop()">
    <i class="fa fa-chevron-up scroll-to-top-arrow"></i>
  </button>
</div>

这里是CSS：

.scroll-to-top {
  position: fixed;
  bottom: 15px;
  right: 15px;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  color: white;
}
.show-scrollTop {
  opacity: 1;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
}
.scroll-to-top-button {
  background-color: #7496ee;
  border-radius: 100px;
  width: 50px;
  height: 50px;
  color: white;
}
.scroll-to-top-button:hover {
  background-color: darken(#7496ee, 5%);
}
.scroll-to-top-arrow {
  font-size: 30px;
}

我还想提一下，这是一个Angular 应用程序。

【问题讨论】：

您是否检查过元素以查看每种情况下应用了哪些样式？
我试过了，但我不知道我在这里搜索什么，因为这个问题仅在我在实际手机上打开应用程序时出现，而不是在控制台中检查时出现。
但是由于您的应用程序是 Angular 的，因此可能有一个 webview，您可以在打开应用程序时通过 Safari 进行检查。
我做到了，我在 Chrome 和 Safari 中都检查了它，并在 Chrome 控制台和 Safari 控制台中测试了所有设备。它显示正确。

标签： html css ios angular mobile

【解决方案1】：

我通过明确指定按钮的内容必须居中解决了这个问题（我还从按钮中删除了填充，但我想这对修复并不重要）：

.scroll-to-top-button {
  background-color: #7496ee;
  border-radius: 100px;
  width: 50px;
  height: 50px;
  color: white;
  text-align: center !important;
  padding: 0 !important;
}

奇怪的是，它在 DevTools 上可以工作，但在手机上却不行（就像它在手机上定位在右侧一样）。

【讨论】：