Не отображаются в браузере Сафари на айфон 10 свг-иконки в футере. Что странно, что на том же телефоне эти же иконки нормально отображаются в браузере Яндекс. Я всегда думал, что на ios в принудительном порядке используется webkit. Проблем на андроиде не было замечено.
<footer class="main-footer">
<div class="container">
<div class="social-networks">
<ul>
<li>
<a class="twitter" href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7.42062C19.405 7.66154 18.771 7.82123 18.11 7.89877C18.79 7.524 19.309 6.93508 19.553 6.22523C18.919 6.57415 18.219 6.82062 17.473 6.95815C16.871 6.36646 16.013 6 15.077 6C13.261 6 11.799 7.36062 11.799 9.02862C11.799 9.26862 11.821 9.49938 11.875 9.71908C9.148 9.59631 6.735 8.38985 5.114 6.552C4.831 7.00523 4.665 7.524 4.665 8.08246C4.665 9.13108 5.25 10.0606 6.122 10.5988C5.595 10.5895 5.078 10.4483 4.64 10.2258C4.64 10.2351 4.64 10.2471 4.64 10.2591C4.64 11.7305 5.777 12.9526 7.268 13.2342C7.001 13.3015 6.71 13.3338 6.408 13.3338C6.198 13.3338 5.986 13.3228 5.787 13.2822C6.212 14.4812 7.418 15.3628 8.852 15.3914C7.736 16.1972 6.319 16.6828 4.785 16.6828C4.516 16.6828 4.258 16.6717 4 16.6412C5.453 17.5062 7.175 18 9.032 18C15.068 18 18.368 13.3846 18.368 9.384C18.368 9.25015 18.363 9.12092 18.356 8.99262C19.007 8.56615 19.554 8.03354 20 7.42062Z" />
</svg>
<span>Привет! Присоединяйся к нами в Twitter!</span></a>
</li>
<li>
<a class="google-plus" href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.8503 12.395C14.8503 13.5773 14.6111 14.6318 14.1328 15.5583C13.6545 16.4792 12.9728 17.1983 12.0877 17.7156C11.2025 18.2385 10.1882 18.5 9.0447 18.5C8.22555 18.5 7.44213 18.3352 6.69444 18.0055C5.94676 17.6758 5.30353 17.2324 4.76476 16.6753C4.22598 16.1182 3.79716 15.4532 3.4783 14.6801C3.15943 13.907 3 13.097 3 12.25C3 11.403 3.15943 10.593 3.4783 9.81992C3.79716 9.04684 4.22598 8.38176 4.76476 7.82469C5.30353 7.26762 5.94676 6.82424 6.69444 6.49454C7.44213 6.16485 8.22555 6 9.0447 6C10.617 6 11.9667 6.5457 13.0937 7.63711L11.4527 9.26569C10.8095 8.62335 10.0068 8.30218 9.0447 8.30218C8.36849 8.30218 7.74175 8.4784 7.1645 8.83083C6.59274 9.18327 6.13918 9.6636 5.80382 10.2718C5.46846 10.8744 5.30078 11.5338 5.30078 12.25C5.30078 12.9662 5.46846 13.6285 5.80382 14.2367C6.13918 14.8392 6.59274 15.3167 7.1645 15.6692C7.74175 16.0216 8.36849 16.1978 9.0447 16.1978C9.50101 16.1978 9.91884 16.1324 10.2982 16.0017C10.683 15.871 10.9991 15.709 11.2465 15.5157C11.4939 15.3167 11.7083 15.0922 11.8898 14.8421C12.0767 14.592 12.2114 14.3561 12.2938 14.1344C12.3818 13.9127 12.4423 13.7024 12.4753 13.5034H9.0447V11.3547H14.7513C14.8173 11.7128 14.8503 12.0596 14.8503 12.395ZM22 11.3547V13.1453H20.2765V14.9274H18.5447V13.1453H16.8212V11.3547H18.5447V9.57265H20.2765V11.3547H22Z" />
</svg>
<span>Привет! Присоединяйся к нами в Google Plus!</span></a>
</li>
<li>
<a class="youtube" href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.235 7.15636C19.7467 6.31418 19.2169 6.15927 18.138 6.10036C17.0603 6.02945 14.3501 6 12.0022 6C9.64987 6 6.93862 6.02945 5.862 6.09927C4.78537 6.15927 4.25437 6.31309 3.76162 7.15636C3.25875 7.99745 3 9.44618 3 11.9967C3 11.9989 3 12 3 12C3 12.0022 3 12.0033 3 12.0033V12.0055C3 14.5451 3.25875 16.0047 3.76162 16.8371C4.25437 17.6793 4.78425 17.832 5.86087 17.9029C6.93863 17.964 9.64987 18 12.0022 18C14.3501 18 17.0602 17.964 18.1391 17.904C19.218 17.8331 19.7479 17.6804 20.2361 16.8382C20.7435 16.0058 21 14.5462 21 12.0065C21 12.0065 21 12.0033 21 12.0011C21 12.0011 21 11.9989 21 11.9978C21 9.44618 20.7435 7.99745 20.235 7.15636ZM9.75 15.2727V8.72727L15.375 12L9.75 15.2727Z" />
</svg>
<span>Привет! Присоединяйся к нами в YouTube!</span></a>
</li>
<li>
<a class="instagram" href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 4H9C6.239 4 4 6.239 4 9V15C4 17.761 6.239 20 9 20H15C17.761 20 20 17.761 20 15V9C20 6.239 17.761 4 15 4ZM18.5 15C18.5 16.93 16.93 18.5 15 18.5H9C7.07 18.5 5.5 16.93 5.5 15V9C5.5 7.07 7.07 5.5 9 5.5H15C16.93 5.5 18.5 7.07 18.5 9V15Z" />
<path d="M11.9999 8C9.79094 8 7.99994 9.791 7.99994 12C7.99994 14.209 9.79094 16 11.9999 16C14.2089 16 15.9999 14.209 15.9999 12C15.9999 9.791 14.2089 8 11.9999 8ZM11.9999 14.5C10.6219 14.5 9.49994 13.378 9.49994 12C9.49994 10.621 10.6219 9.5 11.9999 9.5C13.3779 9.5 14.4999 10.621 14.4999 12C14.4999 13.378 13.3779 14.5 11.9999 14.5Z" />
<path d="M16.3 8.23324C16.5944 8.23324 16.833 7.9946 16.833 7.70024C16.833 7.40587 16.5944 7.16724 16.3 7.16724C16.0057 7.16724 15.767 7.40587 15.767 7.70024C15.767 7.9946 16.0057 8.23324 16.3 8.23324Z" fill="#9F9F9F" />
</svg>
<span>Привет! Присоединяйся к нами в Instagram!</span></a>
</li>
</ul>
</footer>
.main-footer {
display: flex;
align-items: center;
justify-content: center;
height: 180px;
background-color: #EBEBEB;
.container {
background-color: inherit;
padding: 0;
margin: 0;
}
ul {
list-style: none;
display: flex;
padding: 0;
justify-content: space-around;
}
li {
width: 24px;
height: 24px;
}
svg {
fill: #9F9F9F;
}
svg:hover {
fill: #3205F3;
}
a {
height: 24px;
width: 24px;
display: inline-block;
margin-right: 10px;
}
a span {
height: 0;
overflow: hidden;
}
span {
display: block;
margin-top: 20px;
font-size: 15px;
line-height: 21px;
color: #5F5F5F;
}
}
