Closed LoeiFy closed 8 years ago
右边多处的空白是怎么回事？其他正常浏览器都是没有问题的，包括 pc Android iOS 7 以上。看来代码是没有问题的。
首先想到的是用 Safari debug 工具看看页面结构，发现空白处就真的是 空白 。 来回查看页面 DOM 结构，页面居然很快恢复正常，这时候明白是页面渲染相关，只要再触发页面渲染（重绘或者重排）一次，页面就会正常，在 debug 工具来回查看 DOM 时候会触发页面的渲染。
空白
接着想到 Google 搜索一下相关问题，但这个关键字不好写，我是这样的关键字：ios 6 rotate page overflow，然后就搜到一些不相关的内容：怎么屏蔽浏览器旋转之类的问题。
搜索无果，就尝试删减 css 相关 html body 处的 css 定义，删除一些比较可疑的样式，没有找到问题。
比较可疑
于是查看其他页面，有了新发现，一部分代码相同的某个页面并没有这样的问题，无论怎么旋转屏幕都是正常的。这样就好办了，我可以用排除法一步步找到最终问题所在。
排除法去找问题也没什么好说的，运气好，直觉好一点的就很快找到问题代码，最终找到问题所在 input 的 css width 定义：
input
input { width: 100%; ... }
只要这个 width 的不定义，或者定义为 px 单位就没有问题了。
width
但是这个 width 不定义 100%，页面布局会有问题，于是就再次 Google， 这次的关键字是：ios 6 input rotate overflow ，然后就找到相应解决办法
解决这个问题方法也有一些，最终解决办法是 input 父级添加 css：overflow: hidden。 这里我的理解是 overflow 这个定义有点触发页面渲染的意味，不管怎样，这个属性是挺有意思的。
overflow: hidden
overflow
首先是问题
右边多处的空白是怎么回事？其他正常浏览器都是没有问题的，包括 pc Android iOS 7 以上。看来代码是没有问题的。
首先想到的是用 Safari debug 工具看看页面结构，发现空白处就真的是
空白。 来回查看页面 DOM 结构，页面居然很快恢复正常，这时候明白是页面渲染相关，只要再触发页面渲染（重绘或者重排）一次，页面就会正常，在 debug 工具来回查看 DOM 时候会触发页面的渲染。接着想到 Google 搜索一下相关问题，但这个关键字不好写，我是这样的关键字：ios 6 rotate page overflow，然后就搜到一些不相关的内容：怎么屏蔽浏览器旋转之类的问题。
搜索无果，就尝试删减 css 相关 html body 处的 css 定义，删除一些
比较可疑的样式，没有找到问题。于是查看其他页面，有了新发现，一部分代码相同的某个页面并没有这样的问题，无论怎么旋转屏幕都是正常的。这样就好办了，我可以用排除法一步步找到最终问题所在。
排除法去找问题也没什么好说的，运气好，直觉好一点的就很快找到问题代码，最终找到问题所在
input的 css width 定义：只要这个
width的不定义，或者定义为 px 单位就没有问题了。但是这个
width不定义 100%，页面布局会有问题，于是就再次 Google， 这次的关键字是：ios 6 input rotate overflow ，然后就找到相应解决办法解决这个问题方法也有一些，最终解决办法是
input父级添加 css：overflow: hidden。 这里我的理解是overflow这个定义有点触发页面渲染的意味，不管怎样，这个属性是挺有意思的。