[jQuery] Re: Prevent jagged text in IE
@Dave
If this problem has a good fix, it should be fixed. There are several
cases that will break differently in IE when this proposed fix is
applied. It's not achieving consistent cross-browser behavior. There
may be a solution out there still, and if someone has one they should
post it.
I haven't tested it, but did suggest an 'extra check' for opacity in
the sample I gave. Assuming jQuery reports the curCSS correctly, this
would seems to address the 'snap' issue you described...
if ($E.css('filter') $E.css('opacity')==1)
FYI, I ran across another example of this issue today. I created a
test page with both a static and popup ui.datepicker. When seen side-
by-side in IE7, the popup (animated) datepicker text is obviously not
anti-aliased as the static version is...
http://layout.jquery-dev.net/demos/datepicker.html
All UI Widgets using animation look poorer than necessary when used in
*the most common browser in the world*. So if this won't be addressed
in the jQuery core, then every UI widget using animated elements
should be patched to address it. Such a simple, common problem should
not be allowed to affect UI Widgets IMO.
/Kevin
On Sep 30, 2:46 pm, Dave Methvin dave.meth...@gmail.com wrote:
I'm not sure why this 'fix' should be added to fadeOut? It seems most
applicable to fadeIn and fadeTo.
Whoops, right. So the problem would be that in IE only, .fadeTo
(slow, 1) makes the element completely visible and then pops to 50%
opacity based on the stylesheet when the element's filter property is
removed.
There is no way to fix anti-aliasing if the user *chooses* to use
opacity since this is a browser issue,
If the user chooses to set a 50% opacity in the stylesheet that should
work properly in IE as well, right? A fix for antialiasing shouldn't
break something that currently works properly across browsers.
Calling it an IE-bug doesn't make it go away. This is a cross
browser issue, pure and simple.
If this problem has a good fix, it should be fixed. There are several
cases that will break differently in IE when this proposed fix is
applied. It's not achieving consistent cross-browser behavior. There
may be a solution out there still, and if someone has one they should
post it.
[jQuery] Re: Prevent jagged text in IE
@Dave
with the fix, fades out but then pops to 50% opacity
I'm not sure why this 'fix' should be added to fadeOut? It seems most
applicable to fadeIn and fadeTo. But whatever the case, a little extra
code could handle edge-cases -- something like...
if (jQuery.browser.msie $(this).css('opacity')==1)
this.style.removeAttribute('filter')
Or for the politically correct...
var $E = $(this);
if ($E.css('filter') $E.css('opacity')==1)
this.style.removeAttribute('filter')
There is no way to fix anti-aliasing if the user *chooses* to use
opacity since this is a browser issue, but it is *other 99%* that is
the issue. There are many 'effects' used in jQuery that trigger the
problem, so it should handle these *common scenarios*. Calling it an
IE-bug doesn't make it go away. This is a a cross browser issue, pure
and simple.
/Kevin
On Sep 29, 7:34 am, Dave Methvin dave.meth...@gmail.com wrote:
This is a nice simple solution to a common cross-browser issue, so
wouldn't it be reasonable for this to be added to the standard jQuery
animate method? The extra size is minimal.
That solution assumes no opacity was specified in a stylesheet.
style
#glory {
opacity: 0.5;
filter: alpha(opacity = 50);
}
/style
script
// with the fix, fades out but then pops to 50% opacity
$(#glory).fadeOut();
/script
[jQuery] Re: Prevent jagged text in IE
I'm not sure why this 'fix' should be added to fadeOut? It seems most applicable to fadeIn and fadeTo. Whoops, right. So the problem would be that in IE only, .fadeTo (slow, 1) makes the element completely visible and then pops to 50% opacity based on the stylesheet when the element's filter property is removed. There is no way to fix anti-aliasing if the user *chooses* to use opacity since this is a browser issue, If the user chooses to set a 50% opacity in the stylesheet that should work properly in IE as well, right? A fix for antialiasing shouldn't break something that currently works properly across browsers. Calling it an IE-bug doesn't make it go away. This is a cross browser issue, pure and simple. If this problem has a good fix, it should be fixed. There are several cases that will break differently in IE when this proposed fix is applied. It's not achieving consistent cross-browser behavior. There may be a solution out there still, and if someone has one they should post it.
[jQuery] Re: Prevent jagged text in IE
Although it is not the most elegant of solutions, I found that adding position:relative to the element in question preserved the smoothness of the div's content when using fadeTo. Hope this helps. Ben On Sep 26, 12:56 am, Dave Maharaj :: WidePixels.com d...@widepixels.com wrote: I have content that loads into a div and in every browser except IE it renders fine. In the wonderful IE it comes in jagged...sometimes it snaps after and looks normal but for the most part its all jagged. The page is a white bg with text rendering into of it. Howcan I fix this so it looks normal? Not using a crazy font, just font-family:Helvetica, Arial, sans-serif; 1em Ideas? Suggestions? Thanks Dave
[jQuery] Re: Prevent jagged text in IE
This is a nice simple solution to a common cross-browser issue, so
wouldn't it be reasonable for this to be added to the standard jQuery
animate method? The extra size is minimal.
That solution assumes no opacity was specified in a stylesheet.
style
#glory {
opacity: 0.5;
filter: alpha(opacity = 50);
}
/style
script
// with the fix, fades out but then pops to 50% opacity
$(#glory).fadeOut();
/script
[jQuery] Re: Prevent jagged text in IE
deprecating the UA interrogation was a bad move imo, simply because sometimes you legitimately want to know what browser somebody is running, rather than whether it has support for feature-x. it takes 5 mins to write a function to find the browser/os/whatever (and five seconds to copy/paste one you wrote previously ;-) ) but not having to re-write that is very much the point of jquery. a framework shouldn't dictate what you can do, but provide tools to do it as efficiently as possible. checking for a combination of features that you know are supported in the current version of chrome to find that browser isn't particularly efficient both in terms of code and maintenance. as for the x-browser animation issue, i suspect (rightly or wrongly) this would get filed away as an IE bug rather than a feature of jquery. On Sep 27, 8:09 pm, Kevin Dalman kevin.dal...@gmail.com wrote: If browser-detection can't be used, then subsititute code to detect the filter attribute instead. The exact syntax is not important... I believe jQuery SHOULD handle this cross-browser animation issue because it is common to the majority of users. It is clearly a deficiency when jQuery's own contributors have to override core methods to address it. The choices are: A) Update jQuery to handle this issue natively, or; B) Continue using hacks for animations in the world's most common browser. I'm interested in opinions on this, particularly from the regular jQuery contributors. /Kevin On Sep 27, 4:20 am, ryan.j ryan.joyce...@googlemail.com wrote: browser sniffing is already deprecated in favour of feature sniffing, it's unlikely code using it will be added.
[jQuery] Re: Prevent jagged text in IE
browser sniffing is already deprecated in favour of feature sniffing,
it's unlikely code using it will be added.
On Sep 27, 5:13 am, Kevin Dalman kevin.dal...@gmail.com wrote:
@Rick
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
This is a nice simple solution to a common cross-browser issue, so
wouldn't it be reasonable for this to be added to the standard jQuery
animate method? The extra size is minimal.
/Kevin
On Sep 25, 5:17 pm, Rick Faircloth r...@whitestonemedia.com wrote:
I include a reference to a file with this jQuery code in every page to solve
that problem, Dave.
Best solution I've found so far. I got it from someone, somewhere, but don't
remember who.
Rick
jQuery.fn.fadeIn = function(speed, callback) {
return this.animate({opacity: 'show'}, 750, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
jQuery.fn.fadeOut = function(speed, callback) {
return this.animate({opacity: 'hide'}, 750, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
jQuery.fn.fadeTo = function(speed,to,callback) {
return this.animate({opacity: to}, 750, function() {
if (to == 1 jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
[jQuery] Re: Prevent jagged text in IE
If browser-detection can't be used, then subsititute code to detect the filter attribute instead. The exact syntax is not important... I believe jQuery SHOULD handle this cross-browser animation issue because it is common to the majority of users. It is clearly a deficiency when jQuery's own contributors have to override core methods to address it. The choices are: A) Update jQuery to handle this issue natively, or; B) Continue using hacks for animations in the world's most common browser. I'm interested in opinions on this, particularly from the regular jQuery contributors. /Kevin On Sep 27, 4:20 am, ryan.j ryan.joyce...@googlemail.com wrote: browser sniffing is already deprecated in favour of feature sniffing, it's unlikely code using it will be added.
[jQuery] Re: Prevent jagged text in IE
I tried adding a solid bg color to the css to test quickly but it still
rendered jagged. So I figured the easiest way is to scrap the fade all
together. LOL Problem solved.
Dave
-Original Message-
From: James [mailto:james.gp@gmail.com]
Sent: September-25-09 11:26 PM
To: jQuery (English)
Subject: [jQuery] Re: Prevent jagged text in IE
What happens if you set a solid background-color to the element that holds
the text?
On Sep 25, 3:08 pm, Dave Maharaj :: WidePixels.com
d...@widepixels.com wrote:
Thanks,
Will give it a shot.
Dave
_
From: Rick Faircloth [mailto:r...@whitestonemedia.com]
Sent: September-25-09 9:48 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Prevent jagged text in IE
I include a reference to a file with this jQuery code in every page to
solve that problem, Dave.
Best solution I've found so far. I got it from someone, somewhere, but
don't remember who.
Rick
jQuery.fn.fadeIn = function(speed, callback) {
return this.animate({opacity: 'show'}, 750, function()
{
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
jQuery.fn.fadeOut = function(speed, callback) {
return this.animate({opacity: 'hide'}, 750, function()
{
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
jQuery.fn.fadeTo = function(speed,to,callback) {
return this.animate({opacity: to}, 750, function() {
if (to == 1 jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com]
On Behalf Of Michael Geary
Sent: Friday, September 25, 2009 8:07 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Prevent jagged text in IE
Make sure the text opacity is 100%. Don't fade it in. IE renders
non-antialiased text when opacity is less than 100%.
If that's not it, post a link to a test page.
-Mike
On Fri, Sep 25, 2009 at 4:56 PM, Dave Maharaj :: WidePixels.com
d...@widepixels.com wrote:
I have content that loads into a div and in every browser except IE it
renders fine. In the wonderful IE it comes in jagged...sometimes it
snaps
after and looks normal but for the most part its all jagged. The page
is a white bg with text rendering into of it. Howcan I fix this so it
looks normal?
Not using a crazy font, just font-family:Helvetica, Arial, sans-serif;
1em
Ideas? Suggestions?
Thanks
Dave
[jQuery] Re: Prevent jagged text in IE
On Sep 25, 8:17 pm, Rick Faircloth r...@whitestonemedia.com wrote: I include a reference to a file with this jQuery code in every page to solve that problem, Dave. Best solution I've found so far. I got it from someone, somewhere, but don't remember who. http://www.malsup.com/jquery/fadetest.html
[jQuery] Re: Prevent jagged text in IE
Much appreciated, Mike! It's been of tremendous benefit! Rick -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of Mike Alsup Sent: Saturday, September 26, 2009 9:26 AM To: jQuery (English) Subject: [jQuery] Re: Prevent jagged text in IE On Sep 25, 8:17 pm, Rick Faircloth r...@whitestonemedia.com wrote: I include a reference to a file with this jQuery code in every page to solve that problem, Dave. Best solution I've found so far. I got it from someone, somewhere, but don't remember who. http://www.malsup.com/jquery/fadetest.html
[jQuery] Re: Prevent jagged text in IE
@Rick
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
This is a nice simple solution to a common cross-browser issue, so
wouldn't it be reasonable for this to be added to the standard jQuery
animate method? The extra size is minimal.
/Kevin
On Sep 25, 5:17 pm, Rick Faircloth r...@whitestonemedia.com wrote:
I include a reference to a file with this jQuery code in every page to solve
that problem, Dave.
Best solution I've found so far. I got it from someone, somewhere, but don't
remember who.
Rick
jQuery.fn.fadeIn = function(speed, callback) {
return this.animate({opacity: 'show'}, 750, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
jQuery.fn.fadeOut = function(speed, callback) {
return this.animate({opacity: 'hide'}, 750, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
jQuery.fn.fadeTo = function(speed,to,callback) {
return this.animate({opacity: to}, 750, function() {
if (to == 1 jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
[jQuery] Re: Prevent jagged text in IE
Make sure the text opacity is 100%. Don't fade it in. IE renders non-antialiased text when opacity is less than 100%. If that's not it, post a link to a test page. -Mike On Fri, Sep 25, 2009 at 4:56 PM, Dave Maharaj :: WidePixels.com d...@widepixels.com wrote: I have content that loads into a div and in every browser except IE it renders fine. In the wonderful IE it comes in jagged...sometimes it snaps after and looks normal but for the most part its all jagged. The page is a white bg with text rendering into of it. Howcan I fix this so it looks normal? Not using a crazy font, just font-family:Helvetica, Arial, sans-serif; 1em Ideas? Suggestions? Thanks Dave
[jQuery] Re: Prevent jagged text in IE
I include a reference to a file with this jQuery code in every page to solve
that problem, Dave.
Best solution I've found so far. I got it from someone, somewhere, but don't
remember who.
Rick
jQuery.fn.fadeIn = function(speed, callback) {
return this.animate({opacity: 'show'}, 750, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
jQuery.fn.fadeOut = function(speed, callback) {
return this.animate({opacity: 'hide'}, 750, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
jQuery.fn.fadeTo = function(speed,to,callback) {
return this.animate({opacity: to}, 750, function() {
if (to == 1 jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of Michael Geary
Sent: Friday, September 25, 2009 8:07 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Prevent jagged text in IE
Make sure the text opacity is 100%. Don't fade it in. IE renders
non-antialiased text when opacity is less than 100%.
If that's not it, post a link to a test page.
-Mike
On Fri, Sep 25, 2009 at 4:56 PM, Dave Maharaj :: WidePixels.com
d...@widepixels.com wrote:
I have content that loads into a div and in every browser except IE it
renders fine. In the wonderful IE it comes in jagged...sometimes it snaps
after and looks normal but for the most part its all jagged. The page is a
white bg with text rendering into of it. Howcan I fix this so it looks
normal?
Not using a crazy font, just font-family:Helvetica, Arial, sans-serif; 1em
Ideas? Suggestions?
Thanks
Dave
[jQuery] Re: Prevent jagged text in IE
Thanks,
Will give it a shot.
Dave
_
From: Rick Faircloth [mailto:r...@whitestonemedia.com]
Sent: September-25-09 9:48 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Prevent jagged text in IE
I include a reference to a file with this jQuery code in every page to solve
that problem, Dave.
Best solution I've found so far. I got it from someone, somewhere, but don't
remember who.
Rick
jQuery.fn.fadeIn = function(speed, callback) {
return this.animate({opacity: 'show'}, 750, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
jQuery.fn.fadeOut = function(speed, callback) {
return this.animate({opacity: 'hide'}, 750, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
jQuery.fn.fadeTo = function(speed,to,callback) {
return this.animate({opacity: to}, 750, function() {
if (to == 1 jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of Michael Geary
Sent: Friday, September 25, 2009 8:07 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Prevent jagged text in IE
Make sure the text opacity is 100%. Don't fade it in. IE renders
non-antialiased text when opacity is less than 100%.
If that's not it, post a link to a test page.
-Mike
On Fri, Sep 25, 2009 at 4:56 PM, Dave Maharaj :: WidePixels.com
d...@widepixels.com wrote:
I have content that loads into a div and in every browser except IE it
renders fine. In the wonderful IE it comes in jagged...sometimes it snaps
after and looks normal but for the most part its all jagged. The page is a
white bg with text rendering into of it. Howcan I fix this so it looks
normal?
Not using a crazy font, just font-family:Helvetica, Arial, sans-serif; 1em
Ideas? Suggestions?
Thanks
Dave
[jQuery] Re: Prevent jagged text in IE
What happens if you set a solid background-color to the element that
holds the text?
On Sep 25, 3:08 pm, Dave Maharaj :: WidePixels.com
d...@widepixels.com wrote:
Thanks,
Will give it a shot.
Dave
_
From: Rick Faircloth [mailto:r...@whitestonemedia.com]
Sent: September-25-09 9:48 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Prevent jagged text in IE
I include a reference to a file with this jQuery code in every page to solve
that problem, Dave.
Best solution I've found so far. I got it from someone, somewhere, but don't
remember who.
Rick
jQuery.fn.fadeIn = function(speed, callback) {
return this.animate({opacity: 'show'}, 750, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
jQuery.fn.fadeOut = function(speed, callback) {
return this.animate({opacity: 'hide'}, 750, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
jQuery.fn.fadeTo = function(speed,to,callback) {
return this.animate({opacity: to}, 750, function() {
if (to == 1 jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of Michael Geary
Sent: Friday, September 25, 2009 8:07 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Prevent jagged text in IE
Make sure the text opacity is 100%. Don't fade it in. IE renders
non-antialiased text when opacity is less than 100%.
If that's not it, post a link to a test page.
-Mike
On Fri, Sep 25, 2009 at 4:56 PM, Dave Maharaj :: WidePixels.com
d...@widepixels.com wrote:
I have content that loads into a div and in every browser except IE it
renders fine. In the wonderful IE it comes in jagged...sometimes it snaps
after and looks normal but for the most part its all jagged. The page is a
white bg with text rendering into of it. Howcan I fix this so it looks
normal?
Not using a crazy font, just font-family:Helvetica, Arial, sans-serif; 1em
Ideas? Suggestions?
Thanks
Dave
