How to optimize a heavy site for Firefox and IE11?

Question

css

I created an example of a slider that is used on the site codepen.io/anon/pen/MwGwjN embedded
small videos for additional load because the site itself can not be shown and there are more slides and 2 background videos
How to reduce lags in Firefox and IE11?
Everything is ok in chrome.
PS webkit spoiled me :(

Answer 1

1. Use transition and translate3d where possible
2. If animation is calculated in JS, then separate calculation and rendering. Do rendering only on requestAnimationFrame.
3. Cache measurements of the size of elements, it is desirable to measure everything only 1 time.
4. If the lags remain, stop all videos while moving.