Баг svg в мобильном safari

259
04 ноября 2017, 13:35

У меня есть три страницы с одинаковым header(сделан blade-шаблоном Laravel) с svg-иконкой и кнопкой меню. С главной страницы можно перейти на две другие. При клике по кнопке меню открывается/закрывается. Проблема в том, что на главной странице кнопка меню работает, а на двух других она начинает работать только если перезагрузить страницу или проскроллить(даже если проскоблить и вернуться в начальное положение). Этот баг воспроизводится только в мобильном Safari.

Не знаю, как это связано со страницами/обновлением/скроллом, но если убрать эту иконку или заменить ее на другую, то все работает. Отсюда я делаю вывод, что проблема именно в svg.

Может кто сталкивался с подобным, подскажите, пожалуйста.

вот код header-а:

<header class="header-mobile">
    <div class="nav-wrapper">
        <svg class="badge">
            <use xlink:href="#l-beta"></use>
        </svg>
        <div class="button-menu js-button-menu"></div>
    </div>
    <div class="menu js-menu"></div>
</header>

код иконки:

<symbol id="l-beta" width="40" height="20" viewBox="0 0 40 20">
    <defs>
        <path id="a" d="M8 0h24a8 8 0 0 1 8 8v4a8 8 0 0 1-8 8H0V8a8 8 0 0 1 8-8z"/>
    </defs>
    <g fill="none" fill-rule="evenodd">
        <g>
            <use fill="#FFF" xlink:href="#a"/>
            <path stroke="#E2E2E2" stroke-width="2" d="M1 19h31a7 7 0 0 0 7-7V8a7 7 0 0 0-7-7H8a7 7 0 0 0-7 7v11z"/>
        </g>
        <path fill="#B9C2C8" d="M11.535 14H8.061V5.545h3.398c1.588 0 2.543.809 2.543 2.11 0 .884-.65 1.675-1.482 1.816v.1c1.142.117 1.904.931 1.904 2.033 0 1.488-1.084 2.396-2.889 2.396zM9.373 6.658v2.467h1.559c1.16 0 1.763-.428 1.763-1.23 0-.78-.568-1.237-1.54-1.237H9.372zm0 6.229h1.898c1.184 0 1.811-.48 1.811-1.377 0-.885-.65-1.348-1.887-1.348H9.373v2.725zm9.205-4.319c-.932 0-1.582.657-1.652 1.653h3.222c-.029-1.002-.638-1.653-1.57-1.653zm1.565 3.71h1.212c-.287 1.142-1.306 1.845-2.765 1.845-1.828 0-2.947-1.254-2.947-3.293s1.142-3.334 2.941-3.334c1.775 0 2.848 1.213 2.848 3.217v.44h-4.506v.07c.04 1.119.691 1.828 1.699 1.828.762 0 1.283-.276 1.518-.774zm3.246-6.247v1.617h-1.014V8.71h1.014v3.604c0 1.23.556 1.722 1.957 1.722.246 0 .48-.03.685-.064v-1.05c-.176.018-.287.03-.48.03-.627 0-.903-.293-.903-.96V8.708h1.383v-1.06h-1.383V6.03h-1.26zm6.21 7.014c.95 0 1.653-.604 1.653-1.395v-.533l-1.559.1c-.879.058-1.277.357-1.277.92 0 .574.498.908 1.184.908zm-.322 1.06c-1.23 0-2.127-.744-2.127-1.91 0-1.148.856-1.81 2.373-1.904l1.729-.1v-.55c0-.674-.445-1.055-1.307-1.055-.703 0-1.19.258-1.33.709h-1.219c.13-1.096 1.16-1.799 2.608-1.799 1.6 0 2.502.797 2.502 2.145V14h-1.213v-.896h-.1c-.38.638-1.078 1.001-1.916 1.001z"/>
    </g>
</symbol>

изначальный код svg:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20" viewBox="0 0 40 20">
    <defs>
        <path id="a" d="M8 0h24a8 8 0 0 1 8 8v4a8 8 0 0 1-8 8H0V8a8 8 0 0 1 8-8z"/>
    </defs>
    <g fill="none" fill-rule="evenodd">
        <g>
            <use fill="#FFF" xlink:href="#a"/>
            <path stroke="#E2E2E2" stroke-width="2" d="M1 19h31a7 7 0 0 0 7-7V8a7 7 0 0 0-7-7H8a7 7 0 0 0-7 7v11z"/>
        </g>
        <path fill="#B9C2C8" d="M11.535 14H8.061V5.545h3.398c1.588 0 2.543.809 2.543 2.11 0 .884-.65 1.675-1.482 1.816v.1c1.142.117 1.904.931 1.904 2.033 0 1.488-1.084 2.396-2.889 2.396zM9.373 6.658v2.467h1.559c1.16 0 1.763-.428 1.763-1.23 0-.78-.568-1.237-1.54-1.237H9.372zm0 6.229h1.898c1.184 0 1.811-.48 1.811-1.377 0-.885-.65-1.348-1.887-1.348H9.373v2.725zm9.205-4.319c-.932 0-1.582.657-1.652 1.653h3.222c-.029-1.002-.638-1.653-1.57-1.653zm1.565 3.71h1.212c-.287 1.142-1.306 1.845-2.765 1.845-1.828 0-2.947-1.254-2.947-3.293s1.142-3.334 2.941-3.334c1.775 0 2.848 1.213 2.848 3.217v.44h-4.506v.07c.04 1.119.691 1.828 1.699 1.828.762 0 1.283-.276 1.518-.774zm3.246-6.247v1.617h-1.014V8.71h1.014v3.604c0 1.23.556 1.722 1.957 1.722.246 0 .48-.03.685-.064v-1.05c-.176.018-.287.03-.48.03-.627 0-.903-.293-.903-.96V8.708h1.383v-1.06h-1.383V6.03h-1.26zm6.21 7.014c.95 0 1.653-.604 1.653-1.395v-.533l-1.559.1c-.879.058-1.277.357-1.277.92 0 .574.498.908 1.184.908zm-.322 1.06c-1.23 0-2.127-.744-2.127-1.91 0-1.148.856-1.81 2.373-1.904l1.729-.1v-.55c0-.674-.445-1.055-1.307-1.055-.703 0-1.19.258-1.33.709h-1.219c.13-1.096 1.16-1.799 2.608-1.799 1.6 0 2.502.797 2.502 2.145V14h-1.213v-.896h-.1c-.38.638-1.078 1.001-1.916 1.001z"/>
    </g>
</svg>

если вставить его в html, то все работает

READ ALSO
Ссылка на почту

Ссылка на почту

Как можно сделать ссылку на почту, что б при нажатии на нее, открывалась страница почты, а имеено на страницу "написать /отправить письмо",...

376
Настраивал 404-ю ошибку сайта. Как создать &ldquo;.htaccess&rdquo; файл?

Настраивал 404-ю ошибку сайта. Как создать “.htaccess” файл?

В интернете нашел, что настройка 404-й страницы происходит с помощьюhtaccess - файла

261
Пути в background-image

Пути в background-image

В sass пытаюсь указать пути к картинке, но ничего не выходит, между кавычками в url не появляются пути, что бы их указать В css всё работает нормальноbackground-image:...

220
input radio зависимости

input radio зависимости

введите сюда кодЕсть 2 блока с различными input radio блокамиВ каждом по 3 варианта выбора

283