为什么移动浏览器中的计算样式与规则样式不同？

Question

出于某种原因，我在移动浏览器中的弹出式窗口中有一个iframe，一旦iframe加载，它就会更改iframe的大小，使其超出屏幕尺寸，无论我在检查器中做什么，计算样式都不会更新。

检查器显示的样式生效（并且在包括android在内的所有其他地方都有效）：

.gc-lightbox > iframe {
    background-color: #FFF;
    height: 645px;
    width: 900px;
    position: relative;
    border: 4px solid rgba(255, 255, 255, 0.5);
    max-height: 90%;
    max-width: 90%;
    overflow: hidden;
    border: none;
} 

但是，在移动浏览器中，“计算高度”和“计算宽度”相差很大（取决于您启动的弹出窗口），它们的高度高达3000px，宽度高达700px。 检查器没有将height: 900px或max-height: 90%划掉，即使我直接在iframe标记上放置了style="width: 300px !important; height: 300px !important" ，计算值仍会过去这些值没有说明原因。

有什么线索吗？

单击任何校园之旅链接（正如我所说，它可以在除移动Safari甚至是Android之外的所有地方按预期工作） http://www.georgiancollege.ca/new-campus-tours/

Answer 1

在我的一个项目中，“ Safari计算规则”与“样式规则”不匹配。 就像，甚至将！important直接添加到内联样式中也无济于事。

罪魁祸首是页面上的过渡效果太多。 转换涉及输入和文本区域（我们使用JS对其进行了很多操作）。 改变这一点帮助我。

  transition: none;