Salesforce Lightning Design System (SLDS) Activity Component and z-index

For the Lightning Components I’m developing for a customer I’m using the activity timeline component to show a chronologic timeline of “stuff”. However when I added the markup to my Lightning Component and ran it inside Salesforce the vertical bars were missing. What to do? Crack open the Chrome Developer Tools and inspect – but hey! Then the bars were there… Close Developer Tools and the bars were gone again. Hmmm… Seems to be a viewport height issues. But then again not…

After quite a lot of tinkering I figured out that the issue was actually caused by a z-index issue of the layer showing the bar. I had to add the below CSS to my styling. Please note that I’m using the “event” sprites and coloring. But the most important thing to pay attention to here is the z-index of the :before psudo class for the slds-timeline__media classes and the slds-media__figure.

.THIS .slds-media__figure {
	z-index: 2;
}
.THIS .slds-timeline__media--event:before {
    background-color: #a9a9a9;
    z-index: 1;
}
.THIS .slds-timeline__media--event:before {
    background-color: #ff6600;
    z-index: 1;
}

YMMV…