Алексей Уколов

Это не работает потому, что у тега input нет контента. А псевдоэлементы вставляются до или после контента. Нет контента - нет псевдоэлементов.

Вам нужно либо использовать свои классы, а не теги, либо сделать какой-то контейнер и определять все стили внутри него.

htmlbook.ru/css/background-size
caniuse.com/#search=background-size

Невозможно ответить на такой общий вопрос.
Если у вас интернет-магазин и 50% пользователей ходят без js, то версия без js нужна. Или не нужна - зависит от бизнес-целей. Например, посещаемость 4 человека в месяц и прибыль 2000, а на внедрение не-js версии нужно потратить 20000, то это экономически нецелесообразно.

Мы за последние три года ни в одном проекте фоллбэки не делали.

Виновато свойство transform у .panel. К сожалению, не могу сказать почему так происходит с точки зрения теории.

codepen.io/anon/pen/ZYqXdy

#preview {
    margin-top: 50px;
}

Проблема в этом.

Если нужен отступ, то margin стоит заменить на padding.