Блог

Главная - Вопросы по программированию - CSS — Фоновое изображение Выглядит по-другому в Chrome по сравнению с Браузер Firefox

CSS — Фоновое изображение Выглядит по-другому в Chrome по сравнению с Браузер Firefox

#html #css #sass

Вопрос:

Изображения должны лучше всего объяснить проблему, но я применяю 2 фона к этой странице, градиент с параболой SVG поверх нее. Они выглядят по-разному в Firefox и Chrome, и на самом деле они выглядят неправильно в обоих из них по сравнению с тем, что ожидается, учитывая CSS. Я считаю, что правильным результатом, учитывая CSS, было бы закрепление параболы слева независимо от размера экрана (как в FF), не касаясь правой стороны экрана и не завершая полную кривую (как в Chrome). Поэтому правильным поведением будет левая сторона Firefix и правая сторона Chrome.

Вот CSS, который я использую…

 .container: {
     background: url($SVG_PATH}) no-repeat fixed left center, linear-gradient(128.99deg, #E61815 48.82%, #FFB777 97.86%);
     background-size: 100% 100%;
}

Браузер Firefox
Браузер Firefox

Хром
Хром

Firefox рассчитал CSS
Firefox рассчитал CSS

Комментарии:

1. Просто быстро: уверены, что svg-элементы в обоих примерах действительно(!) одинаковы? На первый взгляд мне кажется, что изображение растянуто до разных размеров (в пикселях) и, возможно, разных решений в примере Chrome и Firefox … Итак, может быть, эффект может быть связан с разными соотношениями сторон на разных экранах? Не зная, но просто думать о будущем 😉

Метки: