Для начала, упростите пример и поэкспериментируйте на живом демо: https://jsfiddle.net/IonDen/9xtc8dLp/1/
Во вторых, насколько я знаю, для применения background-size в IE, у элемента должны быть четко определенные размеры в процентах или в пикселях, попробуйте.
1. Не парьтесь, пользователи древней XP привыкли к этому. У них все сайты так выглядят)
2. Если все же паритесь, то конкретно для XP заменяйте шрифт на стандартный.
3. Если все же сильно сильно паритесь, то возьмите нормальный конвертер (FontSquirrel умеет), и добавьте SVG шрифт в список форматов. SVG-шрифт будет сглажен нормально (помните что SVG-шрифты сейчас deprecated и уже мало кто их поддерживает)
В любом случае, если вы хотите чтобы произвольная картинка правильно масштабировалась браузером, вам нужно менять у нее размер только одной стороны, другая сторона будет вычислена автоматически.
С чего вы взяли что на сайте Asus будут правильные драйвера? Правильные драйвера на сайте AMD или те что в комплекте с виндой. Зачем вы сами себе создаете проблему?
Это известный баг iOS и position: fixed. Пока что ничего сделать нельзя напрямую.
Возможные варианты решения:
- переделать на position: absolute и блокировать прокрутку контента при открытии.
- опять же absolute и скроллить на JS.
