box-shadow in Google Chrome

Discussion in 'Web Design and Development' started by StefSSU, Mar 9, 2011.

Most Liked Posts
  1. StefSSU, Mar 9, 2011

    StefSSU macrumors regular

    Joined:
    Jul 18, 2009
    Location:
    London
    #1
    Hi, need a little help from the web guru's.

    So my site has a gallery page, with a bunch of images. I've used css to get border-radius, reflections, etc. The css reflections however don't render in all browsers, Firefox being the most important one. So as a graceful degradation I added a box-shadow to make the images look better in Firefox/Opera. Comparing Safari and Firefox/Opera, this works perfectly - reflection / no shadow in Safari, and shadow / no reflection in Firefox/Opera.

    Google Chrome on the other hand, even though it uses webkit decides to render the box-shadow despite there being no -webkit- prefix. Is there any way to have the box-shadow display in FF/O but not in Chrome? The shadow kind of ruins the reflection.

    The website is temporarily hosted here - costantini.mw gallery
    While we're at it, the site is unfinished but some feedback on other pages and the design would be appreciated.

    Cheers guys,

    Stef
     
    share
    + Quote Reply
  2. elppa, Mar 9, 2011
    Last edited: Mar 9, 2011

    elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #2
    This is just because Chrome is using a newer build of Apple Webkit than Safari 5. If you download the webkit nightly you will see box-shadow is picked up without needing the vendor specific -webkit prefix. When Safari 6 arrives you will have the same issue you have with Chrome. It will render the reflection and the shadow.

    Can't you just:

    [1] Use -webkit-box-reflect (as you do currently for Safari)
    [2] Include -o-box-shadow (for Opera)
    [3] Include -moz-box-shadow (as you do currently for Firefox)
    [4] Remove the box-shadow declaration

    So:
    Safari/Chrome: -webkit-box-reflect
    Opera: -o-box-shadow
    Firefox: -moz-box-shadow

    Surely that will be simplest way?

    I know it would be nice to just use box-shadow, but those vendor prefixes won't be deprecated anytime soon.
     
    share
    + Quote Reply
  3. StefSSU, Mar 9, 2011
    Last edited: Mar 10, 2011

    StefSSU thread starter macrumors regular

    Joined:
    Jul 18, 2009
    Location:
    London
    #3
    *slaps myself in the face*
    Of course, all I had to do was put -o- before the box-shadow... Don't know why I'd forgotten about Opera's prefix.

    Works great, thanks. Now, just to get Internet Explorer to render the page in a way that isn't completely ugly...

    Thanks for the help. Any thoughts on the design then?

    EDIT: Never mind, spoke too soon. It looks like -o-box-shadow doesn't work in Opera... For me, at least. Also Opera doesn't do the border-radius on the images any more (I believe it did do so). Not sure what's happening here.
     
    share
    + Quote Reply
(You must log in or sign up to post here.)

Share This Page