Hey everyone,
I have a series of thumbnails that have a loading overlay placed over
them when they''re clicked on. The overlay is set to an opacity of .7..
.The onclick code looks basically does this:
var loading = document.createElement(''div'');
loading.id = ''loading_image'';
$(loading).addClassName(''thumb_loading'');
$(''container'').appendChild(loading);
Position.clone($(''myThumbnail'').parentNode,$(''loading_image''));
new Effect.Opacity($(''loading_image''),{duration: .2, to: .7});
As long as the loading image is displayed (not just while it''s
actively changing opacity) All the text on the page in FIrefox Mac
dims slightly. The images are left alone, only the text dims. Has
anyone else ran into something like this? Firefox 1.5 and 2.0
Thanks in advance
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
I think you''re experiencing a firefox bug here, that is it switches from the Mac OS X-native text antialiasing to it''s own antialiasing when the opacity less then 100% -- which produces inferior results. Plus, the rendering engine, in some situations, seems to extend this to other, non-related elements. While this is something the Firefox devs have to fix at some point, one thing that _possibly_ solves this is to move your image or text to an other place in the DOM (while maintaing the position with CSS). No guarantees here. Best, Thomas Am 13.12.2006 um 16:58 schrieb Jason Hummel:> > Hey everyone, > > I have a series of thumbnails that have a loading overlay placed over > them when they''re clicked on. The overlay is set to an opacity of .7.. > .The onclick code looks basically does this: > > var loading = document.createElement(''div''); > loading.id = ''loading_image''; > $(loading).addClassName(''thumb_loading''); > $(''container'').appendChild(loading); > Position.clone($(''myThumbnail'').parentNode,$(''loading_image'')); > new Effect.Opacity($(''loading_image''),{duration: .2, to: .7}); > > As long as the loading image is displayed (not just while it''s > actively changing opacity) All the text on the page in FIrefox Mac > dims slightly. The images are left alone, only the text dims. Has > anyone else ran into something like this? Firefox 1.5 and 2.0 > > Thanks in advance > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Thanks for the reply Thomas. Unfortunately it doesn''t look I can fix it in this case. I''m assuming this will be fixed with the new rendering engine in FF 3, which ties into the updated OSX rendering routines. Again, thanks for taking time to answer - and Script.aculo.us rocks. ;) On 12/13/06, Thomas Fuchs <t.fuchs-moWQItti3gBl57MIdRCFDg@public.gmane.org> wrote:> > I think you''re experiencing a firefox bug here, that is it switches > from the Mac OS X-native text antialiasing to it''s own antialiasing > when the opacity less then 100% -- which produces inferior results. > Plus, the rendering engine, in some situations, seems to extend this > to other, non-related elements. > > While this is something the Firefox devs have to fix at some point, > one thing that _possibly_ solves this is to move your image or text > to an other place in the DOM (while maintaing the position with CSS). > No guarantees here. > > Best, > Thomas > > Am 13.12.2006 um 16:58 schrieb Jason Hummel: > > > > > Hey everyone, > > > > I have a series of thumbnails that have a loading overlay placed over > > them when they''re clicked on. The overlay is set to an opacity of .7.. > > .The onclick code looks basically does this: > > > > var loading = document.createElement(''div''); > > loading.id = ''loading_image''; > > $(loading).addClassName(''thumb_loading''); > > $(''container'').appendChild(loading); > > Position.clone($(''myThumbnail'').parentNode,$(''loading_image'')); > > new Effect.Opacity($(''loading_image''),{duration: .2, to: .7}); > > > > As long as the loading image is displayed (not just while it''s > > actively changing opacity) All the text on the page in FIrefox Mac > > dims slightly. The images are left alone, only the text dims. Has > > anyone else ran into something like this? Firefox 1.5 and 2.0 > > > > Thanks in advance > > > > > > > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Has anyone experienced this bug with IE and Firefox on the PC? I''m going to strip down my page to a demo of the problem, but for now you can at least experience the bug at: http://70.87.111.130/~helga/blog/home It kicks in at the five second mark (which is when the effect actually begins). As I said, I''m going to try to isolate the bug more concretely, but I just wanted to see if Effect.Opacity causing different font rendering is a known issue across all platforms. I''ve only been seeing discussions of it regarding OSX, but it looks like it''s clearly happening under IE6 and Firefox 2 on the PC. Regards, Matt On Dec 14 2006, 7:15 am, "Jason Hummel" <jhum...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Thanks for the reply Thomas. Unfortunately it doesn''t look I can fix > it in this case. I''m assuming this will be fixed with the new > rendering engine in FF 3, which ties into the updated OSX rendering > routines. Again, thanks for taking time to answer - and > Script.aculo.us rocks. ;) > > On 12/13/06, Thomas Fuchs <t.fu...-moWQItti3gBl57MIdRCFDg@public.gmane.org> wrote: > > > > > I think you''re experiencing a firefox bug here, that is it switches > > from the Mac OS X-native text antialiasing to it''s own antialiasing > > when theopacityless then 100% -- which produces inferior results. > > Plus, the rendering engine, in some situations, seems to extend this > > to other, non-related elements. > > > While this is something the Firefox devs have to fix at some point, > > one thing that _possibly_ solves this is to move your image or text > > to an other place in the DOM (while maintaing the position with CSS). > > No guarantees here. > > > Best, > > Thomas > > > Am 13.12.2006 um 16:58 schrieb Jason Hummel: > > > > Hey everyone, > > > > I have a series of thumbnails that have a loading overlay placed over > > > them when they''re clicked on. The overlay is set to anopacityof .7.. > > > .The onclick code looks basically does this: > > > > var loading = document.createElement(''div''); > > > loading.id = ''loading_image''; > > > $(loading).addClassName(''thumb_loading''); > > > $(''container'').appendChild(loading); > > > Position.clone($(''myThumbnail'').parentNode,$(''loading_image'')); > > > new Effect.Opacity($(''loading_image''),{duration: .2, to: .7}); > > > > As long as the loading image is displayed (not just while it''s > > > actively changingopacity) All the text on the page in FIrefox Mac > > > dims slightly. The images are left alone, only the text dims. Has > > > anyone else ran into something like this? Firefox 1.5 and 2.0 > > > > Thanks in advance--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
One more fun demonstration of the bug (sorry for two mails at once): View the page in Firefox, and cover up the fader with another window. For example, hit Reload in Firefox, then cover the left half of the page with an explorer window. After the page is finished loading, return to the page. You''ll notice that the part of the page that was covered up renders differently than the part that was not. In other words, if no part of the fader is showing (part of which is set to opacity 0.999), Firefox will render with its default rendering engine. When the rectangle is uncovered, the invalid rectangle is rendered with a different engine which can handle translucent text. For a real-time demo of the bug, you can even position the obfuscating window such that it covers up shorter text phrases, but does not totally cover longer phrases. Viewed in Firefox, this will cause the entire page''s text to become dark, then light, then dark, then light again, as it switches between rendering engines every five seconds. My current thought on a workaround is to fade images only, and not text. If anyone is able to display translucent text on a page without causing the entire rest of the page to render differently from normal, however, I''d love to see how. Regards, Matt On Jan 23, 9:38 pm, "MattFranklin" <matthew.frank...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Has anyone experienced this bug with IE and Firefox on the PC? > > I''m going to strip down my page to a demo of the problem, but for now > you can at least experience the bug at:http://70.87.111.130/~helga/blog/home > > It kicks in at the five second mark (which is when the effect actually > begins). > > As I said, I''m going to try to isolate the bug more concretely, but I > just wanted to see if Effect.Opacitycausing different font rendering > is a known issue across all platforms. I''ve only been seeing > discussions of it regarding OSX, but it looks like it''s clearly > happening under IE6 and Firefox 2 on the PC. > > Regards, > Matt > > On Dec 14 2006, 7:15 am, "Jason Hummel" <jhum...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > Thanks for the reply Thomas. Unfortunately it doesn''t look I can fix > > it in this case. I''m assuming this will be fixed with the new > > rendering engine in FF 3, which ties into the updated OSX rendering > > routines. Again, thanks for taking time to answer - and > > Script.aculo.us rocks. ;) > > > On 12/13/06, Thomas Fuchs <t.fu...-moWQItti3gBl57MIdRCFDg@public.gmane.org> wrote: > > > > I think you''re experiencing a firefox bug here, that is it switches > > > from the Mac OS X-native text antialiasing to it''s own antialiasing > > > when theopacityless then 100% -- which produces inferior results. > > > Plus, the rendering engine, in some situations, seems to extend this > > > to other, non-related elements. > > > > While this is something the Firefox devs have to fix at some point, > > > one thing that _possibly_ solves this is to move your image or text > > > to an other place in the DOM (while maintaing the position with CSS). > > > No guarantees here. > > > > Best, > > > Thomas > > > > Am 13.12.2006 um 16:58 schrieb Jason Hummel: > > > > > Hey everyone, > > > > > I have a series of thumbnails that have a loading overlay placed over > > > > them when they''re clicked on. The overlay is set to anopacityof .7.. > > > > .The onclick code looks basically does this: > > > > > var loading = document.createElement(''div''); > > > > loading.id = ''loading_image''; > > > > $(loading).addClassName(''thumb_loading''); > > > > $(''container'').appendChild(loading); > > > > Position.clone($(''myThumbnail'').parentNode,$(''loading_image'')); > > > > new Effect.Opacity($(''loading_image''),{duration: .2, to: .7}); > > > > > As long as the loading image is displayed (not just while it''s > > > > actively changingopacity) All the text on the page in FIrefox Mac > > > > dims slightly. The images are left alone, only the text dims. Has > > > > anyone else ran into something like this? Firefox 1.5 and 2.0 > > > > > Thanks in advance--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---