Textfield Hotspot rendering problems

a.pu

Schüler

Beiträge: 120

Beruf: software engineer, author of krpano syntax highlighting, bundler and style guide

Dienstag, 15. Juli 2014, 09:10

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

	Quellcode
1	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:

Quellcode

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