Javascript ：活动样式显示为应用于Mobile Safari中点击的随机div

释放按钮时，其他按钮之一在其“活动样式”上闪烁。您可以在我的gif中看到，它似乎只在单击函数和高级divs时发生。点击design div似乎表现正常

一些背景故事：这个问题是在我的CSS中添加html{position:fixed}来解决这个问题之后出现的：

我希望这个问题的CSS解决方案不会重现我以前在iphone视口中遇到的问题。但当然，香草JavaScript是受欢迎的

这发生在我的iPhone4S上，运行IOS7，并且只有当手机处于横向模式且Safari UI、地址栏和底部工具栏处于活动状态时才会发生。只有到那时，这个问题才会发生

html，正文{ 边距：0；填充：0；宽度：100%；高度：100%；背景：fff； 字体系列：Arial；溢出：隐藏； } html{位置：固定；} p{margin:0；padding:0；}nav{height:100%；} .vCenter{ 位置：相对；顶部：50%；-webkit转换：translateY-50%； -ms转换：translateY-50%；转换：translateY-50%； } .选择权{ 边距：0；宽度：33.33%；高度：100%；背景：透明； 文本对齐：居中；文本转换：大写；字体大小：110%；光标：指针； -webkit触摸标注：无；-webkit用户选择：无； -moz用户选择：无；-ms用户选择：无；用户选择：无；浮点：左； -webkit过渡：背景0.5s轻松，颜色0.5s轻松，字体大小0.5s轻松； 过渡：背景0.5s轻松，颜色0.5s轻松，字体大小0.5s轻松； } .选项：活动，.选项：悬停{ 背景：0bb；颜色：eee； } @介质最小高度：299px，最大高度：371px{ .选择权{ 宽度：100%；高度：33.33%；框尺寸：边框框； } 作用{ 边框底部：无； } } @媒体高度：372px{ .选择权{ 宽度：100%；高度：124px；框大小：边框框； } 作用{ 边框底部：1px实心eee； } } @介质最小高度：373px，最大高度：568px{ .选择权{ 宽度：100%；高度：33.4%；框尺寸：边框框； } 作用{ 边框底部：无； } } 网状物

design

函数

高级

---

我猜你会有重叠问题。这就是问题的根源

 .option{
    width:100%; height:33.4%; box-sizing:border-box;
  }

在本例中，您已声明这些元素与另一个元素重叠。您是否曾尝试过声明20%的高度，以确保您没有遇到重叠问题

另外，我想知道为什么您选择html{position:fixed；}而不是简单地将主体声明为视口的100%高度，然后进行低比例缩放。这保证了它始终保持1倍缩放，并且您的身高始终为100%。您可以添加一个溢出：隐藏；如果偏执狂出现了。现在设置好后，浏览器设置或意外缩放仍会破坏您的预期设计

<meta name="viewport" content="width=device-width, user-scalable=no"> 

---

我很想从OP中知道你的一些观点是否对这个问题产生了新的见解。