0

I am testing custom icon fonts in a web app using Safari / iOS 5.1. The icons show up in the viewport on page load, but when I scroll down past the viewport they are missing. If I inspect an element and make any minor change, the missing font's will appear, but again, only those fonts in the current viewport.

Here's an example of the CSS:

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

Everything works fine in Safari 6.1, the problem is only occurring in iOS 5.1. Has anyone experienced this problem?

EDIT: As I was debugging, I disabled position:relative in the code inspector and the icons started appearing correctly.

Here's the test 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;
}

Here's the test 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>
user2517644
  • 1
  • 1
  • Welcome to SO! Can you provide any more details about your css? – tacaswell Jun 25 '13 at 02:27
  • Added CSS and HTML. I can solve this issue by removing position:relative and top:4px, and replacing with padding. But I may need to use relative positioning, so any clarification on this matter is appreciated. – user2517644 Jun 25 '13 at 18:25
  • Found solution [here](http://stackoverflow.com/questions/7808110/css3-property-webkit-overflow-scrollingtouch-error/7893031#7893031) and [also here](http://stackoverflow.com/questions/8110580/ios5-images-disappear-when-scrolling-with-webkit-overflow-scrolling-touch/8275972#8275972). – user2517644 Jun 25 '13 at 21:24
  • -webkit-transform: translateZ(0); ...seems to do the trick. – user2517644 Jun 25 '13 at 21:30
  • If you found the solution please write it up as an answer (and then remember to accept it) – tacaswell Jun 25 '13 at 21:59

1 Answers1

0

Adding...

-webkit-transform: translateZ(0);

...to parent element(s) fixed the problem with font icons not displaying outside the viewport when scrolling down in iOS 5.

Removing... 

position:relative;

...also eliminated the bad behavior, but I couldn't completely roll with that, since I needed to position some of my font icons.

Read more here and here.

Community
  • 1
  • 1
user2517644
  • 1
  • 1