On Android the link focus (orange bubule) is shifted by 20 px up - Pb with text-rendering: optimizeLegibility [#1635448]

A picture worth 1000 words ... see it attached

I'm using AT 7.x-7.2 and Sky 7.x-2.3, and on Android (2.2.1) the Webkit native browser (and Dolphin HD) display an "orange bubble" when you touch a link. This orange bubble should be around the link, but it is shiffted by 20px UP.

The origin of this problem is the text-rendering at the begin of at.base.css

body {
  margin: 0;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

When I remove this property, the focus is OK.
I don't know what's the best practice .... regarding this text-rendering property ...

With text-rendering: optimizeLegibility, I noticed also some square as mentionned here:
http://stackoverflow.com/questions/8797706/android-displays-rectangle-in...

Nico.
PS: if you check http://nicolasfruit.com, I have corrected the pb by setting the value to "auto" in a custom css
body {
text-rendering: auto;
}

Comment	File	Size	Author
#4	adaptivetheme-7.x-2.x-optimizeLegibility_on_ie_only-1635448-4.patch	443 bytes	AohRveTPV
#4	plupload_add_files_after_ie_hack.png	1.07 KB	AohRveTPV
#4	plupload_add_files_before_ie_hack.png	1.06 KB	AohRveTPV
	at_pb_text-rendering.png	16.6 KB	nico059

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

Jeff Burnz CreditAttribution: Jeff Burnz commented 14 June 2012 at 18:48

Category:	bug	» feature
Priority:	Minor	» Normal

I'll consider removing it.

Comment #2

Anonymous (not verified) CreditAttribution: Anonymous commented 23 June 2012 at 10:43

This affected me too on Android 2.2.2 and AT 7.x-3.0-beta1.

I've implemented the workaround of body {text-rendering: auto;} mentioned above, which seems to work fine.

Alan

Comment #3

Jeff Burnz CreditAttribution: Jeff Burnz commented 13 July 2012 at 23:23

Version:	7.x-2.2	» 7.x-2.x-dev
Category:	feature	» task

I'm going to change the implimentation so Android is not affected, and so it targets IE only:

text-rendering: optimizeLegibility\9;

This is already done in 7.x-3.x, so needs backport.

Comment #4

AohRveTPV CreditAttribution: AohRveTPV commented 22 November 2014 at 11:41

Issue summary:	View changes
Status:	Active	» Needs review

File	Size
plupload_add_files_before_ie_hack.png	1.06 KB
plupload_add_files_after_ie_hack.png	1.07 KB
adaptivetheme-7.x-2.x-optimizeLegibility_on_ie_only-1635448-4.patch	443 bytes

optimizeLegibility causes another problem in 7.x-2.x: For a Plupload widget (provided by Plupload Integration module), the text of the "Add files" link is undesirably wrapped in Chrome. Screenshots attached.

So here is a backport of the 7.x-3.x fix. I put the same in-line comment following the change for consistency, even though this does not seem to meet Drupal coding standards. ("Comments should be on a separate line immediately before the code line or block they reference.")