Question

我有一个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>

以下是一个有效的例子：http://mattcoady.me/labs/iframe%20resize/

关于如何减少这些问题或至少使野生动物园变得不那么狂野的任何建议？

转换高度宽度和转换css浏览器问题

0 个答案: