Блог

У меня такая разметка:

 <nav>
    <ul>
        <li><a href="/">
            <span style="color: orangered; background: -webkit-linear-gradient(orangered, darkorange); -webkit-background-clip: text;-webkit-text-fill-color: transparent;; font-weight:bold;">The</span> 
            <Icon>
                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
                    viewBox="0 0 122.88 102.72" 
                    style="enable-background:new 0 0 122.88 102.72; color: orangered; background: -webkit-linear-gradient(orangered, darkorange); 
                    -webkit-background-clip: text;-webkit-text-fill-color: transparent;; font-weight:bold;" xml:space="preserve">
                    <g><path class="st0" d="M65.61,20.91v72.74h35.63c0.38,0,0.68,0.31,0.68,0.69v7.7c0,0.38-0.31,0.69-0.68,0.69H22.84 c-0.38,0-0.69-0.31-0.69-0.69v-7.7c0-0.38,0.31-0.69,0.69-0.69h35.63l0-72.71c-3.1-1.08-5.56-3.53-6.64-6.63H29.3v3.43 c0,0.38-0.31,0.68-0.68,0.68h-5.78c-0.38,0-0.69-0.31-0.69-0.68v-3.43h-5.73c-0.44,0-0.8-0.31-0.8-0.68V7.84 c0-0.38,0.36-0.69,0.8-0.69h35.43C53.33,2.99,57.31,0,61.99,0c4.68,0,8.66,2.99,10.14,7.16h35.53c0.44,0,0.8,0.31,0.8,0.69v5.78 c0,0.38-0.36,0.68-0.8,0.68h-6.46v3.43c0,0.38-0.31,0.68-0.68,0.68h-5.78c-0.38,0-0.69-0.31-0.69-0.68v-3.43H72.16 C71.09,17.38,68.67,19.81,65.61,20.91L65.61,20.91z M99.66,22.3l22.91,40.48c0.2,0.35,0.29,0.73,0.28,1.1h0.02c0,0.05,0,0.1,0,0.15 c0,9.64-11.35,17.46-25.35,17.46c-13.85,0-25.1-7.65-25.34-17.15c-0.04-0.16-0.06-0.34-0.06-0.51c0-0.44,0.14-0.86,0.37-1.2 l23.43-40.43c0.59-1.02,1.89-1.37,2.91-0.78C99.2,21.65,99.48,21.95,99.66,22.3L99.66,22.3z M99.75,31.11v30.6h17.32L99.75,31.11 L99.75,31.11z M95.67,61.7V31.16L77.96,61.7H95.67L95.67,61.7z M27.54,22.3l22.91,40.48c0.2,0.35,0.29,0.73,0.28,1.1h0.02 c0,0.05,0,0.1,0,0.15c0,9.64-11.35,17.46-25.35,17.46c-13.85,0-25.1-7.65-25.34-17.15C0.02,64.19,0,64.02,0,63.84 c0-0.44,0.14-0.86,0.37-1.2L23.8,22.21c0.59-1.02,1.89-1.37,2.91-0.78C27.08,21.65,27.36,21.95,27.54,22.3L27.54,22.3z M27.63,31.11v30.6h17.32L27.63,31.11L27.63,31.11z M23.54,61.7V31.16L5.84,61.7H23.54L23.54,61.7z M61.99,6.07 c2.59,0,4.69,2.1,4.69,4.69c0,2.59-2.1,4.69-4.69,4.69c-2.59,0-4.69-2.1-4.69-4.69C57.3,8.17,59.4,6.07,61.99,6.07L61.99,6.07z"/></g></svg>
            </Icon>
            <span style="color: orangered; background: -webkit-linear-gradient(orangered, darkorange); -webkit-background-clip: text;-webkit-text-fill-color: transparent;; font-weight:bold;">Referendum</span>
            </a>
        </li>
  </ul>
</nav>
 

В моем навигационном компоненте. Это отлично работает в dev.

Однако в производстве часто происходит странное дублирование многих элементов. Это не является последовательным, но распространенным явлением. Это хуже при удаленном развертывании приложения в облаке, но также наблюдается при локальном запуске prod build.

Другие элементы воспроизведены странно, но это простой пример, который вы можете увидеть. Обратите внимание, что слово «референдум: отображается дважды, но только в разметке один раз.

Я устранял неполадки, и это как-то связано с элементами SVG. Если они удалены из приложения, проблема исчезнет.

Приложение доступно здесь, возможно, вам потребуется перезагрузить пару раз, чтобы увидеть его. http://35.223.159.8 /

Вот минимальное воспроизведение: https://github.com/MTyson/sapper-bug Просто начальный шаблон с парой значков в нем. Он работает здесь: http://rfrndm.com / Просто перезагрузите пару раз, и вы это увидите.