自定義圖標字體不在視口外顯示

我正在使用Safari/iOS 5.1在Web應用程序中測試自定義圖標字體。這些圖標顯示在頁面加載的視口中，但是當我向下滾動它們缺失的視口時。如果我檢查一個元素並做出任何細微的更改，將會出現丟失的字體，但同樣只會顯示當前視口中的那些字體。自定義圖標字體不在視口外顯示

下面是CSS的例子：

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

一切工作在Safari 6.1罰款，這個問題只出現在iOS中5.1。有沒有人遇到過這個問題？

編輯：當我正在調試，我禁用位置：相對在代碼檢查器和圖標開始正確顯示。

下面是測試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>

來源

2013-06-24 user2517644

歡迎來到SO！你能提供關於你的css的更多細節嗎？ – tacaswell

添加了CSS和HTML。我可以通過刪除位置來解決這個問題：relative和top：4px，並用填充替換。但我可能需要使用相對定位，因此對此事的任何澄清都會得到讚賞。 – user2517644

找到解決方案[這裏]（http://stackoverflow.com/questions/7808110/css3-property-webkit-overflow-scrollingtouch-error/7893031#7893031）和[也在這裏]（http://stackoverflow.com/questions）/8110580/iOS5的圖像-消失-當滾動與 - WebKit的溢出滾動觸摸/ 8275972＃8275972）。 – user2517644

添加...

-webkit-transform: translateZ(0);

...父元素（S）的固定當在iOS 5中向下滾動時，在視口外不顯示的字體圖標問題。

移除...

position:relative;

...也消除不良行爲，但我不能完全與滾，因爲我需要來定位我的一些字體圖標。

瞭解更多here和here。

來源

2013-06-27 18:23:52 user2517644

自定義圖標字體不在視口外顯示

回答

相關問題