MacBook Scrolling Bug

An animated container with a scrollable list is hardly scrollable if you use a trackpad from Mac. It scrolls just from time to time but not as expected.

HTML

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="style.css">

    <title>MacBook Trackpad Scrolling-Bug</title>
  </head>

  <body ontouchstart="">


    <div id="item1" class="uebersicht flip">

      MacBook Trackpad Scrolling-Bug

      <div class="content">

        <div class="styleWrap scrollable">

          <div id="list">
            <ul>
              <li><b>Tags:</b></li>
              <li>html, body: green</li>
              <li>.uebersicht: silver</li>
              <li>.content: red</li>
              <li>styleWrap: blue</li>
              <li>list: yellow</li>
              <li>-----------</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List Item Here</li>
              <li>Dummy List...

CSS

.content {
  position: absolute;
  top: 75px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 0 30px 150px;
  overflow-x: hidden;
}

#list {
  -webkit-transform: translate3d(0%, 0, 0);
  -moz-transform: translate3d(0%, 0, 0);
  transform: translate3d(-0%, 0, 0);
}

#item1 .styleWrap {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  left: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.uebersicht {
  position: fixed;
  top: 25px;
  bottom: 0;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
  overflow-x: hidden;
  -webkit-transition: right 0s linear 0.3s, -webkit-transform 1s;
  -moz-transition: right 0s linear 0.3s, -webkit-transform 1s;
  transition: right 0s linear 0.3s, -webkit-transform 1s;
}

.uebersicht.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
  right: -100%;
}

.uebersicht.flip.show {
  right: 0;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transition: right 0s linear 0.25s, -webkit-transform 1s;
  -moz-transition: right 0s linear 0.25s, -webkit-transform 1s;
  transition: right 0s linear 0.25s, -webkit-transform 1s;
}

/* just highlighting*/

html, body {
  background-color: green;
}
.content {
  background-color: red;
}
.uebersicht {
  background-color: silver;
}
#list {
  background-color: yellow;
}
.styleWrap {
  background-color: blue;
}