Search code examples
node.jstwitter-bootstrappugcarouselvisual-glitch

Bootstrap carousel with transition background displacement

When the slide transitions, the background image displaces below the carousel before going back to the correct position. This happens on every slide every transition (when clicking or waiting). Here is a GIF showing what happens. http://gyazo.com/350334669db0e76f6d2b6e80fce0aed3

I have looked through some similar questions (all resolved). Only one seems it's the same issue, but the solution isn't applicable in my situation.

Here is the code. It is done mostly in jade with some html here and there. https://github.com/CastawayLabs/MCFreelancer/blob/master/views/index.jade

Solution

  • Your div was position:relative. Bootstrap uses position:absolute to perform the transition.

    div.item(style='background: url(http://p1.pichost.me/640/25/1477731.jpg) no-repeat;  background-size:cover; width: 900; height:400; position: relative;')

    See patched commit