在iPad上出现动画问题的CSS3按钮

Question

我有一个像这样的汉堡图标 - 点击它时只使用CSS3（website link here）

成为“X”

但是我的客户看到的是这样的东西（仅限iPad）：

我的问题是：

1）导致这种情况的原因是什么？

2）如何重现这样的错误，因为我没有iPad并且调整浏览器大小（开发人员工具）不能重现错误？

.mobile-nav {
      position: fixed;
      z-index: 10103;
      bottom: 40%;
      left: 45%;
      margin-top: -230px;
      pointer-events: none;
    }
    .mobile-nav .mobile-nav-bg {
      /* this is the stretching navigation background */
      position: absolute;
      z-index: 10102;
      top: 0;
      right: 0;
      width: 60px;
      height: 60px;
      border-radius: 30px !important;
      background: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      webkit-transition: height .2s, box-shadow .2s;
      -webkit-transition: height .2s, box-shadow .2s;
      transition: height .2s, box-shadow .2s;
    }
    .mobile-nav-trigger {
      position: absolute;
      z-index: 10103;
      top: 2px;
      right: 0;
      height: 60px;
      width: 60px;
      border-radius: 50% !important;
      overflow: hidden;
      white-space: nowrap;
      color: transparent;
      pointer-events: auto;
    }
    .mobile-nav-trigger span,
    .mobile-nav-trigger span::after,
    .mobile-nav-trigger span::before {
      /* this is the hamburger icon */
      position: absolute;
      width: 16px;
      height: 2px;
      background-color: #000;
    }
    .mobile-nav-trigger span {
      /* middle line of the hamburger icon */
      webkit-transition: background-color 0.2s;
      -webkit-transition: background-color 0.2s;
      transition: background-color 0.2s;
      left: 50%;
      top: auto;
      bottom: 50%;
      right: auto;
      webkit-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
              transform: translateX(-50%) translateY(-50%);
    }
    .mobile-nav-trigger span::after,
    .mobile-nav-trigger span::before {
      /* top and bottom lines of the hamburger icon */
      content: '';
      bottom: 0;
      left: 0;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      webkit-transition: transform 0.2s;
      -webkit-transition: -webkit-transform 0.2s;
      transition: -webkit-transform 0.2s;
      transition: transform 0.2s;
      transition: transform 0.2s, -webkit-transform 0.2s;
    }
    .mobile-nav-trigger span::before {
      webkit-transform: translateY(-6px);
      -webkit-transform: translateY(-6px);
              transform: translateY(-6px);
    }
    .mobile-nav-trigger span::after {
      webkit-transform: translateY(6px);
      -webkit-transform: translateY(6px);
              transform: translateY(6px);
    }
    
    .nav-is-visible .mobile-nav-trigger span {
  background-color: transparent; }

.nav-is-visible .mobile-nav-trigger span::before {
  webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg); }

.nav-is-visible .mobile-nav-trigger span::after {
  webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://188.166.163.149/static/theme/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script>
  $(document).ready(function() {
    $('nav').click(function() {
      $(this).toggleClass('nav-is-visible');
    });
  });
</script>


<div class="box">
<nav class="mobile-nav visible-xs visible-sm nav-is-visible"><a class="mobile-nav-trigger menu-trigger" href="#0"><span aria-hidden="true"></span></a><ul><li></li></ul><span aria-hidden="true" class="mobile-nav-bg"></span></nav>
</div>

Answer 1

在许多情况下，您的供应商前缀不正确。例如：

.mobile-nav-trigger span {
  ...
  webkit-transition: background-color 0.2s;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
  ...
}

在我知道的任何浏览器中，这3个的第一个声明是不合法的。在所有情况下都需要删除第一行（＃34之前没有破折号; webkit＆＃34;）。其他两行有效;并且应该存在于所有情况中。

虽然我没有对此进行明确的测试，但肯定会导致您遇到的问题。

Answer 2

注册免费的Apple开发者帐户，下载XCode，您就可以将iOS设备模拟器作为iPad运行。这将允许您测试您的潜在修复。但是，你需要一台Mac。但是，除了购买或借用iPad之外，这是我知道如何做到这一点的唯一方式。