Question

我的CSS在Google Chrome，Mozilla和Opera上运行得非常好。我也尝试过Internet Explorer，但这是一个破产 - 不重要。

我现在最大的问题是让我的CSS在手机游戏（以及其他智能手机浏览器，如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非常适合移动游猎......

.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);}
  }

我试图让CSS在移动浏览器上运行

2 个答案: