Textfield Hotspot rendering problems

  • 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');

    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. *smile*

    Edited 4 times, last by a.pu (July 15, 2014 at 6:44 PM).

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!