Question

我正在尝试在加载页面后有一段文字“缩放和淡入淡出”。为此，我正在创建一个包含文本内部的div并将其设置为立即转换：

.whatIwantZoomed {
  opacity:0;

    /* Vendor Prefixes here */
  transform:scale(4,4);

    /* Vendor Prefixes here */
  transition:transform 1s, opacity 1s;
}

现在，从我的Javascript函数调用时，会应用animated类，将比例缩小为(1,1)：

.whatIwantZoomed.animated {
  opacity:1;

    /* Vendor Prefixes here */
  transform:scale(1,1);
 }

现在，在移动版Safari（iOS 7和iOS 8）上，效果确实有效。问题是缩放文本实际上大于视口的宽度，导致它“调整大小”并缩小页面。当动画发生时，页面会调整回原来的大小。

我在这里尝试做的是删除这个不需要的视口宽度更改。我已经尝试将主体设置为具有overflow-x:hidden;的属性无效，我似乎无法通过视口元素来帮助我。

有人能解释一下解决方案吗？谢谢。

编辑：Added a fiddle demonstrating this。注意HTML框架中的滚动条？这就是我想要阻止的。

Answer 1

试试这个 DEMO

div {
    text-align:center;
    background-color:red;
    transform-origin: 50% 50%;
    transform:perspective(1200) scale(1);
    animation:animated 1s ease-in-out;    
}

@keyframes animated{
    from{transform:scale(10);opacity:0}
}

Answer 2

对于遇到这种情况的人来说，它似乎与this bug

有关

根本原因是屏幕外的内容错误地触发了safari（或wkwebview）来调整视口大小。

将此添加到您的视口元标记：

shrink-to-fit=no

iOS Safari上的CSS缩放转换缩小页面

2 个答案: