Question

以下示例加载YouTube剪辑并在2秒内将其缩放至50％。在iPad上运行时，缩略图会在动画结束时抖动并缩小太小。

为什么会这样？

（示例也可在http://pastehtml.com/view/boy9rz76w.html获得）：

<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      var tag = document.createElement('script');
      tag.src = "http://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'u1zgFlCw8Aw',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
          Player = document.getElementById("player");
          Player.style["-webkit-transition"] = "all 2s ease-in-out";
          Player.style["-webkit-transform"] = "scale(0.5)";
      }

      function onPlayerStateChange(event) {

      }
    </script>
  </body>
</html>

YouTube iframe在iPad Mobile Safari上打破了webkit scale（）

0 个答案: