Reflection.js in Google Chrome

September 6th, 2008

I’ve been inundated over the last few days with emails regarding Reflection.js not working correctly in the IMO rather buggy Google Chrome browser. Thanks for everyone who reported the issue!

Google Chrome is based on Safari’s WebKit engine. Reflection.js works absolutely fine in Apple Safari so there is no problem with Reflection.js’s support for WebKit. It is more likely that this is either a rendering issue with Google Chrome or a small modification needs to be made to ensure compatibility with Chrome.

Indika pointed out:

Chrome doesn’t seem to work well with the Canvas element and the getContext(“2d”).createLinearGradient() with colorStops having an alpha value ranging from 0.0-1.0. A good example of this in use is Reflection.js.

Search cat
Creative Commons License photo: zenera

Unfortunately I’ve not had a chance to play around with Reflection.js in Chrome quite yet because I’ve got several work deadlines coming up! If anybody in the community does discover the specific issue and/or a possible Google Chrome “Hack” or patch, I would love to hear about it so that we can include it in the script! Cheers!

P.S. Anybody using Google Chrome should be aware of the security and privacy issues associated with the current release. Simply, Chrome is *not* ready for everyday use.

About the Author: Hi! I'm Ken. I've been using mobiles for over 10 years and technology for a lot longer! I'd love to hear from you.

Like this tip? Get the most from your mobile phone...

  • Discover brand new ways to use your mobile phone
  • Techniques to get more out of your mobile phone for less
  • Be the first to learn about new mobile technology

Enter your email to receive free regular Ken's Tech Tips:

  1. Google Chrome Security, Privacy, Technical Issues
  2. Google launches web browser: Google Chrome
  3. Google Chrome Easter Egg: about:internets
  4. Reflection.js 2.0
  5. Reflection.js 1.7

2 Responses to “Reflection.js in Google Chrome”

  1. # Franz Enzenhoferon 18 Sep 2008 at 11:07 am

    i used

    if (navigator.appVersion.indexOf(‘WebKit’) != -1 && navigator.appVersion.indexOf(‘Chrome’) == -1) {
    context.fill();

    } else {
    context.fillRect(0, 0, reflectionWidth, reflectionHeight*2);

    }

    aktually the Webkit exception seems to break Google Chrome

    sadly it’+s not a perfect patch as you can see at face search (http://www.facesaerch.com) because now we have at first a white background which gets then converted to the transparent color

    any fixes for this?

    great lib

    br
    franz

  2. # Redaon 04 Nov 2009 at 2:35 pm

    Hi, and thank you for this amazing script.

    I’d like to know if it’s possible to always have the same height of reflection no matter the height of the image.

    thanks for your help

Trackback URI | Comments RSS

Leave a Reply