title: How can I animate shrinking of a uiwebview?
body: <p>I'm trying to shrink a webview smoothly when the keyboard appears, but I'm having trouble with the animation. As soon as the animation is created, the webview's content shrinks to its new frame. After the animation delay, the webview itself animates properly to its new size.</p>
  
  <p>The screenshots below show what it looks like. I've set the background of the web view's scroll view to yellow and the background of the view controller view to green.</p>
  
  <p><img src="https://i.stack.imgur.com/yfSLTm.png" alt="1">
  <img src="https://i.stack.imgur.com/4zZQIm.png" alt="2">
  <img src="https://i.stack.imgur.com/yd5Dmm.png" alt="3">
  <img src="https://i.stack.imgur.com/qspnwm.png" alt="4"></p>
  
  <p>How can I have the content animate smoothly with the webView? This is the code I have for the animation.</p>
  
  <pre><code>-(void)shrinkWebView {
      __weak CDVPlugin* weakSelf = self;
      CGRect frame = weakSelf.webView.frame;
      frame.size.height -= 400;
      [UIView animateWithDuration:2.0
                            delay:3.0
                          options:0
                       animations:^{
                           weakSelf.webView.frame = frame;
                       }
                       completion:nil];
  }
  </code></pre>
  
  <p>Thanks for the help</p>
  
  <p>Here's the stripped down version of the cordova sample app I'm working with.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
  }
  
  body {
      -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
      -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
      -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
      background-color:#E4E4E4;
      background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
      background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
      background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
      background-image:-webkit-gradient(
          linear,
          left top,
          left bottom,
          color-stop(0, #A7A7A7),
          color-stop(0.51, #E4E4E4)
      );
      background-attachment:fixed;
      font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
      font-size:12px;
      height:100%;
      margin:0px;
      padding:0px;
      text-transform:uppercase;
      width:100%;
  }
  
  /* Portrait layout (default) */
  .app {
      background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
      position:absolute;             /* position in the center of the screen */
      left:50%;
      top:50%;
      height:50px;                   /* text area height */
      width:225px;                   /* text area width */
      text-align:center;
      padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
      margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                     /* offset horizontal: half of text area width */
  }
  
  /* Landscape layout (with min-width) */
  @media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
      .app {
          background-position:left center;
          padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
          margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                        /* offset horizontal: half of image width and text area width */
      }
  }
  
  h1 {
      font-size:24px;
      font-weight:normal;
      margin:0px;
      overflow:visible;
      padding:0px;
      text-align:center;
  }
  
  .event {
      border-radius:4px;
      -webkit-border-radius:4px;
      color:#FFFFFF;
      font-size:12px;
      margin:0px 30px;
      padding:2px 0px;
  }
  
  .event.listening {
      background-color:#333333;
      display:block;
  }
  
  .event.received {
      background-color:#4B946A;
      display:none;
  }
  
  @keyframes fade {
      from { opacity: 1.0; }
      50% { opacity: 0.4; }
      to { opacity: 1.0; }
  }
   
  @-webkit-keyframes fade {
      from { opacity: 1.0; }
      50% { opacity: 0.4; }
      to { opacity: 1.0; }
  }
   
  .blink {
      animation:fade 3000ms infinite;
      -webkit-animation:fade 3000ms infinite;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta name="format-detection" content="telephone=no" /&gt;
          &lt;meta name="msapplication-tap-highlight" content="no" /&gt;
          &lt;!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --&gt;
          &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/index.css" /&gt;
          &lt;title&gt;Hello World&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="app"&gt;
              &lt;button onclick="Keyboard.hideFormAccessoryBar(false)"&gt;Shrink&lt;/button&gt;
              &lt;input type="text" /&gt;
              &lt;h1&gt;Apache Cordova&lt;/h1&gt;
              &lt;div id="deviceready" class="blink"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>