strange horizontal lines on custom icon font on ios

Question

I've created a custom Icon-Font for a web-project. It's working perfectly in all desktop Browsers.

But on iPad-Landscape Mode it's sometimes showing strange horizontal lines. I've absolutely no idea about where to look for the mistake.

a screenshot showing what it looks like on the ipad:

a link to the webpage (still in progress)

any advise?

Jorge Y. C. Rodriguez · Answer 1 · 2014-02-22T13:29:21.947

1

do you own a mac? if yes, open the emulator, safari with developer mode enable and inspect the element to determinate which one is giving the error, once you have that you can either use css queries to target ipads or use Mobile Detect to inject the respective css only when is needed

enter image description here

In this particular case you can use this:::

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
 .sliderDivide.hide-phone{display:none;}
}

edited Feb 22 '14 at 13:29

answered Feb 21 '14 at 16:14

Jorge Y. C. Rodriguez

3,394
5
38
61

thanks - but i already tried the simulator. The bug only happens on the "real" iPad. This thing is driving me crazy :( – user3337977 Feb 21 '14 at 18:22
okay... that is odd behaviour, just try to use the media queries and remove all outlines* when is ipad – Jorge Y. C. Rodriguez Feb 21 '14 at 19:15
the thing ist - there's no outlines... its juts a plain iconfont with no additional styling at all. I've googled it for hours, but noone seems to have this kind of problem :( – user3337977 Feb 22 '14 at 13:15
@user3337977 Look at the update, if im not mistaken that is what you wanted right? – Jorge Y. C. Rodriguez Feb 22 '14 at 13:30

strange horizontal lines on custom icon font on ios

1 Answers1