Hello everybody!
In attempt to develop my skin look i tried to make hotspots with textfields and custom typeface (Open Sans).
Unfortunately it caused some rendering problems in various browsers:
1. Blurry rendering of hotspot textfields which is font-independent,
2. Incorrect line positioning.
I did some research using thit test example: http://goo.gl/LdDOv9 (should work on any device, version 1.17.4)
There are some hotspots and a layer(which displays good) with the same css and behaviour implemented, check it in xml
css="text-align:center; color:#ffffff; font-family:OpenSans; font-weight:regular; font-size:16px;padding: 5px 10px 5px;"
The font itself is imported in index.html:
<style type="text/css">
@font-face {
font-family: 'OpenSans';
font-style: normal;
font-weight: 400;
src: local('OpenSans'), url(font/OpenSans-Regular.woff) format('woff'),
url(font/OpenSans-Regular.eot) format('embedded-opentype'),
url(font/OpenSans-Regular.ttf) format('truetype');
}
</style>
Here are screenshots:
1. Firefox 30 + Windows 7, Firefox 30 + Mavericks 10.9.3— pixel perfect and how it should be;
2. IE Mobile 10 + Windows Phone 8and IE 11 + Windows 8.1 — same good;
3. iPhone 5c + iOS 7.1.2 — a little blurry;
4. iPad3 + iOS 7.1.2 — a little blurry and text line is displaced;
5. Safari 7.0 + Mavericks 10.9.3 — blurry and text line is displaced;
6. Chrome 35 + Windows 8.1, Chrome 35 + Windows 7, Chrome 35 + Mavericks 10.9.3 — line displacenent in OS X and blur. Btw all Chromium-based browsers show the same blurry effect.
Things don't change if i use Arial typeface, which is pre-installed on every device (in fact only line displacement disappears)
Wish it was fixed, please-please-please.