Ios 带转换的CSS3问题

我已经做了深入菜单，我在iOS上遇到了性能问题。我不相信我在做这么难的动画。钻取选项部分地基于基础钻取菜单。但是我自己写的

安卓/桌面
下面是它应该如何工作的动画，以及如何在桌面和Android设备上工作。

iOS
此动画显示了它是如何在iOS上运行的，正如您所看到的，动画不是流动的，在50%时它只是将其打断。

你可以在屏幕上看到代码

如何在iOS上修复这些滞后的动画

编辑 如果我从CSS

transition中删除这个：transform1s-linear，动画消失，向下展开菜单直接显示。在所有设备上工作正常。这是iOS中的性能问题吗？我从基金会复制了部分代码，这似乎没有这个问题。我错过了什么

HTML

<ul class="drilldown is-main">
  <li>
    <a href="#" class="has-sub">Item 1</a>
    <ul class="drilldown-menu sub">
      <li class="drilldown-back"><a href="#terug">Back</a></li>
      <li><a href="#">sub 1</a></li>
      <li><a href="#">sub 2</a></li>
      <li><a href="#">sub 3</a></li>
      <li><a href="#">sub 4</a></li>
    </ul>
  </li>
  <li>
    <a href="#" class="has-sub">Item 2</a>
    <ul class="drilldown-menu sub">
      <li class="drilldown-back"><a href="#terug">Back</a></li>
      <li><a href="#">sub 1</a></li>
      <li><a href="#">sub 2</a></li>
      <li><a href="#">sub 3</a></li>
      <li><a href="#">sub 4</a></li>
    </ul>
  </li>
  <li>
    <a href="#" class="has-sub">Item 3</a>
    <ul class="drilldown-menu sub">
      <li class="drilldown-back"><a href="#terug">Back</a></li>
      <li><a href="#">sub 1</a></li>
      <li><a href="#">sub 2</a></li>
      <li><a href="#">sub 3</a></li>
      <li><a href="#">sub 4</a></li>
    </ul>
  </li>

  <li>
    <a href="#" class="has-sub">Item 4</a>
    <ul class="drilldown-menu sub">
      <li class="drilldown-back"><a href="#terug">Back</a></li>
      <li><a href="#">sub 1</a></li>
      <li><a href="#">sub 2</a></li>
      <li><a href="#">sub 3</a></li>
      <li><a href="#">sub 4</a></li>
    </ul>
  </li>

  <li>
    <a href="#" class="has-sub">Item 5</a>
    <ul class="drilldown-menu sub">
      <li class="drilldown-back"><a href="#terug">Back</a></li>
      <li><a href="#">sub 1</a></li>
      <li><a href="#">sub 2</a></li>
      <li><a href="#">sub 3</a></li>
      <li><a href="#">sub 4</a></li>
    </ul>
  </li>
  <li><a href="/">No sub 1</a></li>
  <li><a href="/">No sub 2</a></li>
  <li class="divider"></li>
  <li><a href="/">No sub 3</a></li>
  <li><a href="/">No sub 4</a></li>
</ul>

JS

ul.drilldown {
  background-color: gray;
  list-style: none;
  padding-left: 0px;
}

ul.drilldown li {
  padding-left: 15px;
  padding-right: 15px;
}

ul.drilldown li:hover {
  background-color: darkgray;
}

ul.drilldown li a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 10px 0px;
}

ul.drilldown li a.has-sub::after {
  font-family: "FontAwesome";
  content: "\f054";
  float: right;
}

ul.drilldown li.drilldown-back {
  background-color: lightgray;
}

ul.drilldown li.drilldown-back:hover {
  background-color: darkgray;
}

ul.drilldown li.drilldown-back > a::after {
  font-family: "FontAwesome";
  content: "\f053";
  float: right;
}

ul.drilldown li.divider {
  height: 1px;
  margin: 15px 0;
  overflow: hidden;
  background-color: darkgray;
}

ul .drilldown-menu {
  background-color: gray;
  position: absolute;
  top: 40px;
  left: 100%;
  width: 100%;
  transition: transform 1s linear;
  list-style: none;
  padding-left: 0px;
}

ul .drilldown-menu.sub {
  top: 0px;
  height: 100%;
}

ul .drilldown-menu.is-main {
  left: 0;
  display: block;
  height: 1000px;
}

ul .drilldown-menu.is-active {
  transform: translateX(-100%);
}

ul .drilldown-menu li {
  padding-left: 15px;
  padding-right: 15px;
}

ul .drilldown-menu li:hover {
  background-color: darkgray;
}

ul .drilldown-menu li a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 10px 0px;
}

ul .drilldown-menu li a.has-sub::after {
  font-family: "FontAwesome";
  content: "\f054";
  float: right;
}

ul .drilldown-menu li.drilldown-back {
  background-color: lightgray;
}

ul .drilldown-menu li.drilldown-back:hover {
  background-color: darkgray;
}

ul .drilldown-menu li.drilldown-back > a::after {
  font-family: "FontAwesome";
  content: "\f053";
  float: right;
}

ul .drilldown-menu li.divider {
  height: 1px;
  margin: 15px 0;
  overflow: hidden;
  background-color: darkgray;
}

$(function() {
  $('.drilldown a').click(function(e) {
    var $this = $(this);
    var href = $(this).attr('href');


    if (href == '#') {
      // Menu heeft een submenu
      e.preventDefault();

      $this.next('.drilldown-menu').addClass('is-active');

    } else if (href == '#terug') {
      // Huidige menu sluiten
      e.preventDefault();
      $this.closest('.drilldown-menu').removeClass('is-active');

    }
  });
});