我正在尝试使 CSS 在移动浏览器上工作

Question

我的 CSS 在 Google Chrome、Mozilla 和 Opera 上运行良好。我也尝试过 Internet Explorer，但结果失败了 - 没关系。

我现在最大的问题是让我的 CSS 在移动 safari（和其他智能手机浏览器，如 android）上正常工作。

HTML：

.load-more {
      background-color: #00aa00;
      color: #ffffff;
      display: block;
      font-family: 'Numans', sans-serif;
      font-weight: lighter;
      height: 3em;
      line-height: 3em;
      overflow: hidden;
      padding: 0 3em;
      text-align: center;
      text-decoration: none;
      transition: all .2s ease, background-color .01s ease, color .01s ease;
      border-bottom: none;
    }

    .load-more.load-more--loading {
      animation: rotate 1.5s linear infinite;
      animation-delay: .2s;
      background-color: transparent;
      border: .3em solid #e1e1e1;
      border-radius: 1.5em;
      border-top-color: #00aa00;
      box-sizing: border-box;
      height: 3em;
      color: transparent;
      padding: 0;
      pointer-events: none;
      width: 3em;
      -webkit-animation: rotation 2s infinite linear;
    }


    @-webkit-keyframes rotation {
      from {
        -webkit-transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(359deg);
      }
    }

<form action="stats.php" method="GET">
  <div class="group">
    <input type="text" name="player" autocomplete="off"><span class="highlight"></span><span class="bar"></span>
    <label>USERNAME</label>
  </div>
  <center>
    <input type="submit" value="CHECK STATS" class="load-more">
    </a>
  </center>
</form>

当您单击按钮时，CSS（以及我正在使用的 javascript 文件）会将按钮变成加载器，但在 safari 等移动浏览器上，当您在没有加载器的情况下单击按钮时，按钮就会消失。

示例：https://epicmc.us

Answer 1

iOS 7 和 8 支持一些变换，但不支持 iOS 中的动画。您将不得不使用 jQuery 或其他东西来获得在移动 safari 中工作的效果。 Caniuse.com 在这里告诉我们对这些属性的支持：http://caniuse.com/#search=transform

Answer 2

这个 CSS 在移动 safari 上完美运行......

.load-more {
  background-color: #00aa00;
  color: #ffffff;
  display: block;
  font-family: 'Numans', sans-serif;
  font-weight: lighter;
  height: 3em;
  line-height: 3em;
  overflow: hidden;
  padding: 0 3em;
  text-align: center;
  text-decoration: none;
  border-bottom: none;
  }
  .load-more.load-more--loading {
  background-color: transparent;
  border: .3em solid #e1e1e1;
  border-radius: 1.5em;
  border-top-color: #00aa00;
  box-sizing: border-box;
  height: 3em;
  color: transparent;
  padding: 0;
  pointer-events: none;
  width: 3em;
  -webkit-animation: rotation 2s infinite linear;
  }
  @-webkit-keyframes rotation {
  from {-webkit-transform: rotate(0deg);}
  to   {-webkit-transform: rotate(359deg);}
  }