Nikolay Talanov

Мой ответ является расширенной версией ответа Илья Шатохин про добавление класса .no-transition.
И он в общем то полагается на костыль, но не настолько ужасный как setTimeout.

.no-transition {
  transition: none !important;
}

Затем в js пишем нечто подобное

elem.classList.add("no-transition");
var triggerLayout = elem.offsetHeight;
// действия с элементом которые произойдут мгновенно

Суть такова, что работа с DOM в браузере оптимизирована таким образом, что он "группирует" все изменения и потом применяет их одновременно. Но, если в js коде обращаться к свойстам элементов, которые триггерят лэйаут, эти группы будут "дробиться" в этом месте вызова. В итоге вот эта самая строчка "var triggerLayout = elem.offsetHeight;" вызывает триггер лэйаута и операция с элементом происходит уже так, словно к нему добавлен класс без транзишена. Точно таким же образом например анимируются элементы с display: none, которые надо показать с помощью изменения opacity. Вначале вы меняете свойство display, затем триггерите лэйаут, затем добавляете класс изменяющий опасити - у вас происходит анимация. Без триггера элемент просто моментально появится.
Таблицу css триггеров можно найти тут - csstriggers.com
+ вот тут еще пишут про это gent.ilcore.com/2011/03/how-not-to-trigger-layout-...
Сам по себе лэйаут нужно триггерить только тогда, когда это является лучшим способом реализации анимации, ибо это влияет на производительность. На эту тему (и многие другие вещи) вам сюда - https://developers.google.com/web/fundamentals/per...

Вариант с обучением через верстку .psd макетов вас до "пика" не доведет. Максимум до уровня рядового "верстальщика". Сверстать статику может каждый второй, кто хоть иногда этим занимается. Если вы нацелены на реальный "пик", то вам надо учиться на основе живых примеров уровня www.awwwards.com www.cssdesignawards.com и www.thefwa.com
Копайтесь, смотрите что как сделано, пытайтесь сами воссоздавать отдельные куски "не смотря под капот" (то есть только на основе того, что вы видите, не залезая в F12). Но перед этим вам надо будет нагнать основы, то есть все что связано с css трансформами, нестандартными лэйаутами и другими трендами дизайна, а то иначе когнетивный диссонанс вам обеспечен. После этого будете долго практиковать анимации, свг, 2d-canvas и в самом конце возможно даже WebGL. Обязателен к употреблению codepen.io
Ну а если прочитав все это вы вдруг поняли, что вас на самом деле не интересуют всякие нестандартные промо-сайты, а вам просто надо уметь верстать странички для стандартных интернет-магазинов или еще чего подобного, то вам достаточно будет потратить 1-2 месяца на чтение вводных статей и начать штамповать сайты на бутстрапе. Вот.

По собственному опыту скажу, что с русскими ресурсами по свг все плохо. Знаю что Yoksel иногда пишет про свг вот тут (css.yoksel.ru) и знаю такую вот вводную.
По англоязычным источникам:
1) Сборная солянка №1
2) Сборная солянка №2
3) tutorials.jenkov.com/svg/index.html - много раз выручал этот сайт. Правда попадал я на него обычно с гугла, полностью все не читал.
4) sarasoueidan.com/articles/index.html - ищите по SVG. Есть очень много отличнейших статей, прям эталон.
5) Статьи на https://css-tricks.com/
6) Конечно же великий tympanus.net/codrops
7) Ну и самое самое важное - постоянно пилить демки и смотреть как пилят другие. Чекайте awwwards и подобные сайты, просматривайте codepen. На правах саморекламы - codepen.io/suez/tag/svg (изучаю свг третий месяц, полет нормальный).

Конкретно удаленку (а не фриланс) найти просто. Причем даже не нужны какие-то крутые знания, просто ищите работу "мастера на все руки". Будете поддерживать сайты, пилить новые и все такое (о том как при этом развиваться, написано ниже). Только платить будут мало. Точнее будут платить мало по меркам москвапитера, но для какого-нибудь небольшого городка вы будете чувствовать себя чуть ли не богачем на фоне большинства знакомых, и при этом работать по 3-6 часов в день.
По поводу развития - все зависит от вас. Если вы жить не можете без постоянной помощи более опытных сотрудников, то вам будет тяжело. Если же вы умеете гуглить (а это на самом деле немногие умеют), любите читать все возможные статьи/книги/обсуждения и имеете тягу к запиливанию демок/велосипедов, то "прокачка" будет идти намного быстрее чем в какой-нибудь стандартной "местной веб-студии". Говорю это по своему опыту. Еще год назад я покинул местную "топовую веб-студии города" (топ40 студий по битриксу в России если не ошибаюсь, хотя на деле там печально) будучи зеленым джуном с 5 месяцами опыта работы, тут же устроился по удаленке (прям тем же вечером), а сейчас я бывшим коллегам каждую неделю показываю свои фронт-энд демки и они считают меня магистром (правда тут важно уточнить, что работая по удаленке, я вообще не напрягался, пахал по 10-20 часов в неделю и большую часть времени тратил на саморазвитие, ибо задачи там были тоже не особо развивающие).
Так что мое мнение таково, что будучи джуном вам важно лишь думать об эффективности своего развития, и если работа по удаленке кажется вам удобным вариантом роста, то ищите не раздумывая.

По ходу нашел решение на основе этого stackoverflow.com/questions/19076655/svg-sprite-ba...
В общем в background-size: необходимо указывать не только x но и y величину. На основе того, что у вашего оригинального svg спрайта (gamma.antikvarus.ru/themes/frontend_v2/images/svg/...) значения 960/560 (основываясь на viewBox), а на сайте у вас background-size: 424px; то в итоге получил такое значение
background-size: 424px 247px;
Как только его поставил, позиция svg стала одинаковой в хроме и фф, а если точнее, то стала как в ff, то есть смещенная вверх.
Тестировал на основе иконки логина (Вход), у которой по умолчанию было background-position: -65px -28px;
Вот так с измененными значениями (-22px вместо -28) выглядит в хроме

а так в FF


Так что просто добавляете y значение для background-size и увеличиваете y значение background-position на 6px.

Да потому-что он там и не работает caniuse.com/#feat=css-filters
С помощью css не решите проблему для 11 осла, вам нужна какая-нибудь либа для работы с изображения на канвасе.

Пятиминутка оптимизации:
1) У вас нигде не включена 3д акселерация. Необходимо использовать либо will-change, либо translateZ(). Проще наверное will-change.
а) Добавьте will-change: width, left; для .side
б) Добавьте will-change: transform, width, opacity; для .img
Вот так выглядит таймлайн у меня без твиков:

А вот так выглядит с моими твиками

Как видите до твиков средний фпс был около 30-40 и иногда стабильно проваливался до 20, что в общем то хреново. После твиков 50-60 с джанками на js/layout. Их я уже оптимизировать тут не буду, мне лень :)
2) У вас .side изменяет свойство left, это весьма затратная херня. Постарайтесь переписать с использованием translateX. Это даст буст по производительности
3) Изменение width для фуллскрин элементов это жутко затратное действие, так что ничего удивительного что без твиков у вас все тормозило.

UPDATE: таймлайны приведены из хрома, если это кого интересует. В изначальном виде сайт одинаково ужасно тормозил на chrome/ff. При этом в ie11 все смотрелось весьма неплохо :) Конкретно сказать почему все именно так - не в состоянии, ибо уже сто лет не делал анимацию без акселерации. Обычно всегда побеждает хром, ибо в нем все работает и анимируется плавно, потом идет фф, где почти все работает, но зачастую идет проседание по производительности, и замыкает тройку ослик11, в котором зачастую много-чего не пашет (но при этом то что пашет, работает быстрее чем в фф).

У вас там используется jQuery метод .live, которых сдох уже пару лет назад и не поддерживается начиная с 1.7 или 1.6 версии примерно. А в данный момент у вас стоит 1.11 версия, то есть современная. Вам либо код переписывать (менять live на on и все такое), либо ставить древнюю версию jQuery, если в данный момент нет возможности перелопатить код.
Вот собственно сама строчка кода, на которую матерится браузер (там еще и другие такие есть, если что):
$('#cart > .heading a').live('click', function() {

1) calc про который вы уже написали сами
2) Js (так себе вариант)
3) Использовать padding-top: 120px для header, а nav поместить вверху с position: absolute. Внутри header создать блок с height: 100%, он в свою очередь благодаря паддингу родительского элемента займет все оставшееся пространство, вычитая паддинг. И там уже делайте что-хотите.
Естественно у header должен быть position: relative и для элементов должен быть задан box-sizing: border-box;