0

I have an iframe that I want to transition it size when a user toggles it. It works great in chrome and pretty good in firefox but safari is a mess. I can probably live the the jittery animation but the way is resizes is the problem. When you size the screen down it jumps way up off the top of the screen and when you size the screen back up again it slides way over to the right then snaps back to the middle.

Here's the 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;
  }

Here's the 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>

Here's a working example: http://mattcoady.me/labs/iframe%20resize/

Any advice on how to reduce these issues or at least make safari a little less wild?

Matt Coady
  • 3,418
  • 5
  • 38
  • 63
  • `calc()` may not be supported by safari: http://stackoverflow.com/questions/20443343/css-calc-not-working-in-safari-and-fallback Also would be nice to have your html too so we could recreate your issue. – Alexei Darmin Apr 14 '15 at 02:40
  • I've added the html. It's the same as the link above. I looked into calc support and it looks like it's been supported since safari 7 (8 is the latest version). http://caniuse.com/#feat=calc – Matt Coady Apr 14 '15 at 04:07
  • Odd since safari is executing it as if the `calc` is not there... Removing the `margin-left: calc()` doesn't change the executing in safari at all. – Alexei Darmin Apr 14 '15 at 04:55

0 Answers0