placeholder引起的safari横竖屏切换bug

前几天做触屏版的时候遇到一个bug,当页面从portrait(竖屏)切换为landscape(横屏)模式,再切换回protrait时,页面缩放不正常了。

用Iphone或者Ipad查看DEMO: http://motype.org/demo/placeholder-safari-bug.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
            <title>placeholder-safari-bug</title>
            <style>
            .text-all {
                width: 100%;
            }
            </style>
        </head>
        <body>
        <div class="search-input">
            <input class="text-all" type="search" name="word" autocorrect="off" autocapitalize="off" autocomplete="off" placeholder="Search by Keywords" />
        </div>
        </body>
    </html>



在google搜索多数会得到这个答案:http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug  
但看上面源码,其实提到的viewport设置scale的原因并不存在。

后来发现当input输入框在设置了placeholder值,并且设置了宽度以后就会出现这个bug,上例中的input当在横屏下的宽度超过竖屏最大值时,再切换到竖屏,bug就出现了。解决办法也很简单,给input的外容器设置`overflow:hidden`就可以了。
Comments
Write a Comment