Почему internet explorer обрезает края фона при растягивании, как исправить?

Здравствуйте. При растягивании фона по центру, ie обрезает края, в нормальных браузерах это не наблюдается. Подскажите, как исправить (нужно не фиксированное положение фона)?

5c363dd2a8cae703705323.png
<body>
 <div class="window bg"></div>
</body>


.bg {
       background: url(../../assets/images/fons/bg.svg) no-repeat center center ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.window {
    position: relative;
    width: 95%;
    min-height: 98vh;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1vh;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px #000000;
    min-width: 1200px;
}
  • Вопрос задан
  • 84 просмотра
Решения вопроса 1
SmthTo
@SmthTo
Все перепёлки мира будут оплакивать мою смерть
Как и говорил, проблема в SVG:
5c36512169f5d850896249.jpeg

Нужно было добавить в тег svg:
width="750.3" height="450" preserveAspectRatio="none slice"


Полный код SVG:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 750.3 450" style="enable-background:new 0 0 750.3 450;" xml:space="preserve" width="750.3" height="450" preserveAspectRatio="none slice">
<style type="text/css">
  .st0{fill:url(#SVGID_1_);}
</style>
<g id="bg">
  <g>
    <g>
      
        <radialGradient id="SVGID_1_" cx="177.9216" cy="209.9861" r="519.3318" gradientTransform="matrix(1.2506 0 0 -1 -71.7218 452)" gradientUnits="userSpaceOnUse">
        <stop  offset="1.075270e-02" style="stop-color:#2C35A2"/>
        <stop  offset="0.1635" style="stop-color:#252C88"/>
        <stop  offset="0.3975" style="stop-color:#1B2167"/>
        <stop  offset="0.621" style="stop-color:#15194F"/>
        <stop  offset="0.8273" style="stop-color:#101540"/>
        <stop  offset="1" style="stop-color:#0F133B"/>
      </radialGradient>
      <rect y="0.3" class="st0" width="750.3" height="450"/>
    </g>
  </g>
</g>
</svg>


Либо же cделать градиент на CSS, тем более такой простой.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Spartan.by Минск
от 400 до 700 usd.
Alternativa Games Пермь
от 40 000 до 80 000 руб.
АМТ Екатеринбург
от 40 000 до 50 000 руб.