Some Eclipse Foundation services are deprecated, or will be soon. Please ensure you've read this important communication.
Bug 328382 - text antialiasing problems in IE if the widget has rounded corners or gradient
Summary: text antialiasing problems in IE if the widget has rounded corners or gradient
Status: RESOLVED FIXED
Alias: None
Product: RAP
Classification: RT
Component: RWT (show other bugs)
Version: 1.4   Edit
Hardware: PC Windows 7
: P3 normal (vote)
Target Milestone: 1.4 M3   Edit
Assignee: Project Inbox CLA
QA Contact:
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2010-10-21 12:23 EDT by Istvan Ballok CLA
Modified: 2010-10-25 10:12 EDT (History)
0 users

See Also:
tbuschto: iplog-


Attachments
screenshot showing the difference when rendering text in IE, with and without a filter style property (162.30 KB, image/png)
2010-10-21 12:30 EDT, Istvan Ballok CLA
no flags Details
proposed patch: add a special case handling when removing the filter style property (2.97 KB, patch)
2010-10-21 12:39 EDT, Istvan Ballok CLA
no flags Details | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Istvan Ballok CLA 2010-10-21 12:23:23 EDT
How to reproduce the problem
============================
Display some text e.g. in a Label or a Button, with e.g. a 10px, "Segoe UI"
font. Set a rounded corner or a gradiant as background-image on one of the
widgets, and use plain styles on the other one.
Observe that the text is rendered differently by IE in the 2 cases.
The text on the widget with rounded corner/ gradient looks
weird, e.g. in sequences like "io" or "la" the letters merge, resulting
in an untidy typeface.

Explanation of the problem
==========================
When rounded corners, gradient, or even simply opacity, ... is used,
the filter style property is set. When removing these styles, the property
is set to an empty string, but it is not removed.

If the filter property is set, IE falls back on a different anti aliasing
mode, that causes this issue - even if the filter is an empty.

Solution of the problem
=======================
When removing the filter property in IE, element.style.filter = "" is not
enough. The correct removal is like in
org.eclipse.rap\runtime.rwt\
org.eclipse.rap.rwt.q07\js\org\eclipse\rwt\VML.js
#_removeFilter, modifying the css text.

The central function that removes style properties in qooxdoo is
org.eclipse.rap\runtime.rwt\
org.eclipse.rap.rwt.q07\js\qx\ui\core\Widget.js
#removeStyleProperty

I propose to patch this function by introducing a special case for IE and
the filter style property:
  -> remove the filter property by setting the style.cssText property.
	 cssText = cssText.replace(/FILTER:[^;]*;/,"");

Note: the other alternative approach,
delete style.filter is not supported.
Comment 1 Istvan Ballok CLA 2010-10-21 12:30:02 EDT
Created attachment 181420 [details]
screenshot showing the difference when rendering text in IE, with and without a filter style property
Comment 2 Istvan Ballok CLA 2010-10-21 12:39:25 EDT
Created attachment 181421 [details]
proposed patch: add a special case handling when removing the filter style property

note: you can test this patch only in the debug variant of the client library.
The client.js need to be recompiled (recompressed) to test this in the standard
client mode.
Comment 3 Tim Buschtoens CLA 2010-10-25 10:12:31 EDT
Fixed in CVS HEAD.