Box shadow behaving strange when loading page

  • Resolved lenava

    (@lenava)


    13 years, 4 months ago

    Hi,
    I have given my slideshow some white space around it and then a box shadow outside that. The code looks like this:

    #meteor-slideshowstart, #meteor-slideshowom {
    margin: 20px auto 25px auto;
    -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
    }

    My problem is that whwn the page is loading the box shadows width expands to the pages width for quite a while. Problem in all browsers that I have tested except IE.
    Any suggestions?

    Lena

    http://ww.wp.xz.cn/extend/plugins/meteor-slides/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter lenava

    (@lenava)

    13 years, 4 months ago

    Link to our website where the problem occurs:
    http://adhoc.se

    Plugin Author Josh Leuze

    (@jleuze)

    13 years, 4 months ago

    It looks OK to me, did you get the problem fixed?

    Thread Starter lenava

    (@lenava)

    13 years, 4 months ago

    No, it’s still there. It is most obvious on my Iphone. But I can see it on my laptop too. It might be when I refresh the browser at the exact moment when the image switches. I’m not sure.
    Try refreshing the window a couple of times, or browsing on a smartphone.
    I thought it had something to do with the margin-settings, so I tried percentage instead, but with no luck.

    Plugin Author Josh Leuze

    (@jleuze)

    13 years, 4 months ago

    It is loading quickly on my end, I’m not seeing that. But the height and width is set via JavaScript, so the shadow in the CSS could load before the JavaScript. Try manually setting the dimensions in the same spot as the shadow so that it is never larger:

    #meteor-slideshowstart, #meteor-slideshowom {
width: 380px;
height: 248px;
margin: 20px auto 25px auto;
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
}
    Thread Starter lenava

    (@lenava)

    13 years, 4 months ago

    Thank you, that made the trick!

    Plugin Author Josh Leuze

    (@jleuze)

    13 years, 4 months ago

    You’re welcome!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Box shadow behaving strange when loading page’ is closed to new replies.