自定义图标字体不显示在视口之外答案

【问题标题】：Custom icon fonts not displaying outside of viewport自定义图标字体不显示在视口之外
【发布时间】：2013-06-28 02:23:52
【问题描述】：

我正在使用 Safari / iOS 5.1 在 Web 应用程序中测试自定义图标字体。图标显示在页面加载时的视口中，但是当我向下滚动经过视口时，它们会丢失。如果我检查一个元素并进行任何微小的更改，则会出现丢失的字体，但同样，只有当前视口中的那些字体。

这是一个 CSS 示例：

.icon-test:before { content: "\e025"; }

在 Safari 6.1 中一切正常，该问题仅在 iOS 5.1 中出现。有人遇到过这个问题吗？

编辑：当我调试时，我在代码检查器中禁用了 position:relative 并且图标开始正确显示。

这是测试 CSS：

@font-face {
font-family: 'custom';
src: url('fonts/custom.woff') format('woff'),
url('fonts/custom.ttf') format('truetype');
}

.icon-test-1, .icon-test-2 {
font-family: 'custom';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
/*font-size: 28px;*/
color: #666666;
}


.icon-test-1:before {content: "\e000";}

.icon-test-2:before {content: "\e00e";}

.btn    {
position: relative;
top:4px;
float:right;
clear: both;
display: block;
height: 50px;
}

这是测试 HTML：

<div style="height:200px;width:500px;overflow: auto;">
 <a class="btn" href="#"><i class="icon-test-1"></i></a>
 <a class="btn" href="#"><i class="icon-test-2"></i></a>
 <a class="btn" href="#"><i class="icon-test-1"></i></a>
 <a class="btn" href="#"><i class="icon-test-2"></i></a>
 <a class="btn" href="#"><i class="icon-test-1"></i></a>
 <a class="btn" href="#"><i class="icon-test-2"></i></a>
 <a class="btn" href="#"><i class="icon-test-1"></i></a>
 <a class="btn" href="#"><i class="icon-test-2"></i></a>
 <a class="btn" href="#"><i class="icon-test-1"></i></a>
 <a class="btn" href="#"><i class="icon-test-2"></i></a>
 <a class="btn" href="#"><i class="icon-test-1"></i></a>
 <a class="btn" href="#"><i class="icon-test-2"></i></a>
 <a class="btn" href="#"><i class="icon-test-1"></i></a>
 <a class="btn" href="#"><i class="icon-test-2"></i></a>
 <a class="btn" href="#"><i class="icon-test-1"></i></a>
 <a class="btn" href="#"><i class="icon-test-2"></i></a>
</div>

【问题讨论】：

欢迎来到 SO！您能否提供有关您的 CSS 的更多详细信息？
添加了 CSS 和 HTML。我可以通过删除 position:relative 和 top:4px 并替换为 padding 来解决这个问题。但我可能需要使用相对定位，因此对此事的任何澄清表示赞赏。
找到解决方案here 和also here。
-webkit-transform: translateZ(0); ...似乎可以解决问题。
如果您找到了解决方案，请将其写成答案（然后记得接受）

标签： ios5 fonts

【解决方案1】：

正在添加...

-webkit-transform: translateZ(0);

...to parent element(s) 修复了在 iOS 5 中向下滚动时字体图标不显示在视口之外的问题。

正在删除...

position:relative;

...也消除了不良行为，但我无法完全接受，因为我需要定位一些字体图标。

阅读更多 here 和 here。

【讨论】：