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

时间:2013-06-24 20:05:15

标签: ios5 fonts

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

这是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>  

1 个答案:

答案 0 :(得分:0)

...添加

-webkit-transform: translateZ(0); 

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

删除......

position:relative;

...也消除了不良行为,但我无法完全解决这个问题,因为我需要定位一些字体图标。

了解更多herehere