过渡高度宽度和变换css浏览器问题

我有一个iframe，当用户切换它时，我想转换它的大小。它在chrome上运行得很好，在firefox上运行得也很好，但safari却一团糟。我可能可以活在紧张的动画中，但问题在于调整大小的方式。当你向下调整屏幕尺寸时，它会从屏幕顶部向上跳，当你再次向上调整屏幕尺寸时，它会向右滑动，然后又回到中间

以下是css：

  iframe{

      border: 0 solid #333;
      border-top: 40px solid #333;
      box-shadow: 0 0 30px rgba(0,0,0,.5);
      height: 170%;
      min-height: 600px;
      -webkit-transform: scale(.45) translateX(-55%) translateY(-59%);
      -moz-transform: scale(.45) translateX(-55%) translateY(-59%);
      transform: scale(.45) translateX(-55%) translateY(-59%);
      -webkit-transition: all .3s ease 0s;
      -moz-transition: all .3s ease 0s;
      transition: all .3s ease 0s;
      width: 200%;
      will-change: transform;
  } 

  iframe.mobile{
      border: 20px solid #333;
      border-bottom: 50px solid #333;
      border-radius: 20px;
      box-shadow: 0 15px 30px rgba(0,0,0,.5);
      height: 87%;
      max-height: 568px;
      margin-left: calc(50% - 180px);
      -webkit-transform: scale(.75) translateX(-1%) translateY(-11%);
      -moz-transform: scale(.75) translateX(0%) translateY(-11%);
      transform: scale(.75) translateX(0%) translateY(-11%);
      width: 336px;
  }

以下是HTML：

<span id="toggle">Click here to toggle</span>

<div class="wrapper">
    <iframe src="iframe.html"></iframe>
</div>

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
        $('#toggle').click(function(){
            $('iframe').toggleClass('mobile');  
        })
</script>

下面是一个工作示例：

---

关于如何减少这些问题，或者至少让safari少一点野性，有什么建议吗？

calc可能不受safari的支持：也可以使用html，这样我们就可以重新创建您的问题。我已经添加了html。与上面的链接相同。我查看了calc的支持情况，它似乎已经得到了支持，因为safari 7 8是最新版本。奇怪，因为safari正在执行它，好像calc不在那里。。。删除左边空白：calc根本不会更改safari中的执行。