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

【问题标题】：CSS scale transformation on iOS Safari zooms page outiOS Safari 上的 CSS 缩放转换缩小页面
【发布时间】：2014-12-01 14:09:32
【问题描述】：

页面加载后，我正在尝试使用文本“缩放和淡入”的 sn-p。为此，我正在创建一个包含文本的 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 框架中的滚动条了吗？这就是我试图阻止的。

【问题讨论】：

你在父母身上使用transform-style: preserve-3d吗？你能做一个小提琴吗？
@Tambo 添加了一个小提琴。希望对您有所帮助。

标签： ios css safari transform

【解决方案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}
}

【讨论】：

【解决方案2】：

对于遇到此问题的任何人，它似乎与this bug有关

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

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

shrink-to-fit=no

【讨论】：