chrome内核浏览器，排版错位

用 SemanticUi 做的长表单dialog，限于显示器分辨率的大小，往往只能看到一半的内容，再往下就需要滚动显示。
然而，由于验证信息，表单项目的插入等影响，可见部分的区块高度可能往下挤压。这使得表单总高度变长。
当你理所当然的以为，不可见部分的元素会被自动向下滚动，你会发现，部分元素，还处于未被挤压之前的位置，并没有被挤压下去。我们会看到一个错位的排版。
这时点击表单任何位置，所有元素排版又会正常。

这种现象，有经验的人一看就知道是浏览器的BUG，不可见部分的元素没有重新绘图。火狐浏览器就不会出现这个现象。
可能的原因是，为了节省系统资源，浏览器性能优化过度，该repaint的时候没有repaint。

解决的方法同样也很简单，做个假遮罩，活动于表单区域，让浏览器认为整个表单都在活动，就会repaint

css 代码如下

.form:before{
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: '';
  background-color: transparent;
  z-index: -1;
}