html - Overflow div hardly able to pinch zoom on ipad

Question

If I make a #viewport div wrapping a #wrapper div

    #viewport{
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    overflow-y:scroll;
     -webkit-overflow-scrolling: touch;
    }
   #wrapper{
    width:100%;
    overflow-x:hidden;

    }

    <div id='viewport'>
       <div id='wrapper'>
       <!--Web Content Here -->
       </div>
    </div>

In Ipad it is can't be easily pinch zoom, you have to touch by 2 fingers statically without moving first on the screen for a second before it can pinch zoom, very inconvenience, any solution? Thank you!