While switching slides, a clipped slide is visible in top-left corner for a moment.

[marcoos]

When you switch a slide, part of it is displayed clipped in the top left corner of the page.

See e.g. my slides: http://l10n.mozilla.org/~marcoos/slides/2011/meetjs-krakow/index-en.html

This also happens on http://leaverou.me/csss/sample-slideshow.html#navigation but is almost unnoticable thanks to the background image and colors used in those slides. Set background to #666 instead of the image, to see it there, too.

[LeaVerou]

Yes, I've noticed that too. I'm not sure why it happens. It personally doesn't bother me much, but I'd welcome a fix.

[marcoos]

Played with this for a while this evening, and here's what I found.

You're hiding the slides by setting their width and height to 0:

slideshow.css:

 .slide {
  /* ... */
    height:0;
    width:0;
  /* ... */
 }

The problem is that in theme.css you've got this:

.slide {
    padding:0 2.5% 2%;
/* ... */
}

So what we're seeing during the slide transition is actually the previous slide with CSS width & height set to 0, but thanks to the content-box box-model, padding still makes this box visible.

My quick fix looks like this, then:

.slide.previous, .slide.next {
  padding: 0;
}

I'm not making a pull request yet, since I'm not sure if you'd like to have it fixed in theme.css or slideshow.css.

[LeaVerou]

Thanks! That's not needed much, since they're hidden by opacity:0. Also, since yesterday, all slides but the current, next and previous have display:none, which should improve performance a lot.

Can you please pull the new version and let me know if it's solved?

[marcoos]

The thing is, I was debugging CSSS forked from yours half an hour ago, so I'm afraid it's not solved. Maybe something with transitions comes into place, then.

[marcoos]

I now checked the latest one and it seems it stopped happening after your changes made during the last 50 minutes. :)

[marcoos]

Yup, it's fixed now. Let's close this, then. I checked it in Firefox Nightly and Chrome 14.