ios - 为什么移动 safari 中的计算样式与规则样式不同？

Question

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

inspector 显示的样式正在生效(并且在其他任何地方都有效，包括 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;
} 

但是，在移动 safari 中，“计算高度”和“计算宽度”相差甚远(取决于您启动的弹出窗口)，它们高达 3000 像素高和 700 像素宽。 Inspector 没有划掉 height: 900px 或 max-height: 90% 即使我把 style="width: 300px !important; height : 300px !important" 直接在 iframe 标记上计算的值仍然超过这些值，但没有说明原因。

有什么线索吗？

点击任何校园游览链接(正如我所说，它在任何地方都按预期工作，但移动 safari - 甚至是 android) http://www.georgiancollege.ca/new-campus-tours/

Answer 1

在我的一个元素中，Safari 计算规则与样式规则不匹配。并且，您甚至将 !important 直接添加到内联样式也无济于事。

罪魁祸首原来是页面上的过渡效果太多。过渡是在输入和文本区域上(我们用 JS 进行了很多操作)。改变这个帮助了我。

  transition: none;