Lately i was running into an Safari issue - what happens really often in the last time, i really fell in love with this piece of ****.

Whatever - the thing is, you may come to the idea to define all of your animation properties and set it to animation-play-state:paused. So you can simply trigger the animation with help of an equal class, lets say .play{ animation-play-state: running; }.

This is working great in every current major browser - except Safari (and of course IE .. but .. who still cares).

The simple workaround is: Add the animation-name in the "moment" you triggered the animation-play-state: running before. So you have to implement it this way:

.play{    animation-play-state: running;}.my-animation-name.play{    animation-name: 'my-animation-name';}

I first heard of the object-fit attribute a couple of month ago and i make extensive use of it since this 'magic moment'. It's just so freaking helpfull for RWD that i won't miss it anymore.The worse thing about it, like most new techniques, some major browsers do not support it. It's just the IE & Edge ... so from my personal point of view i give a shit about this browsers. But as web professionals - sadly - we have to care about those.So i found a nice workaround which will work in all Browsers supporting the background-size property.It's pretty simple: In JavaScript, use modernizr to detect missing object-fit support, read out the image path, set the image as background to the parent container. The rest ist just a little css.

If you ever need to have a sticky sidebar, which has a variable height, which is working well with a footer region, without having a second scrollbar ... try https://github.com/somewebmedia/hc-sticky

Trying to build this with waypoint.js or something, is pain in the ass. This great library finished the job in < 5 minutes.