Ios5 自定义图标字体不在视口外显示

Ios5 自定义图标字体不在视口外显示,ios5,fonts,Ios5,Fonts,我正在使用Safari/iOS 5.1测试web应用程序中的自定义图标字体。图标在页面加载时显示在视口中,但当我向下滚动经过视口时,它们将丢失。如果我检查一个元素并进行任何微小的更改,将显示缺少的字体,但同样,在当前视口中仅显示这些字体 以下是CSS的一个示例: 。图标测试:之前{ 内容:“\e025”; } 在Safari 6.1中一切正常,问题只出现在iOS 5.1中。有没有人遇到过这个问题 编辑:调试时,我在代码检查器中禁用了position:relative,图标开始正确显示 以下是测试

我正在使用Safari/iOS 5.1测试web应用程序中的自定义图标字体。图标在页面加载时显示在视口中,但当我向下滚动经过视口时,它们将丢失。如果我检查一个元素并进行任何微小的更改,将显示缺少的字体,但同样,在当前视口中仅显示这些字体

以下是CSS的一个示例:

。图标测试:之前{
内容:“\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>  

正在添加

-webkit-transform: translateZ(0); 
…到父元素修复了在iOS 5中向下滚动时字体图标不显示在视口外的问题

删除

position:relative;
…还消除了不良行为,但我无法完全适应,因为我需要定位一些字体图标


阅读更多信息。

欢迎来到SO!你能提供更多关于css的细节吗?添加了css和HTML。我可以通过删除position:relative和top:4px并替换为padding来解决这个问题。但我可能需要使用相对定位,因此对此问题的任何澄清都将不胜感激。找到解决方案和。-webkit转换:translateZ(0)。。。似乎就是这样。如果你找到了解决方案,请写下来作为答案(然后记得接受)