1

У меня есть SVG-картинка биткоина, я ее анимировал так, что она левитирует вверх-вниз, а также у нее подсвечиваются грани голубым светом. Но я заметил проблему, что если на сайте листнуть вниз, обновить его и вернуться обратно к биткоину, то он начинает перекрывать другие элементы SVG, которые находятся над ним, плюс голубое свечение проходит сквозь грани и светится уже весь биткоин. Что это такое, и как с этим бороться? Скриншот проблемы прилагаю, на первом фото - то, как должно быть, на втором фото - проблема.

нормальное поведение

проблемное поведение

Также заметил, что если мышью навести на любую кнопку на странице, то баг пропадает и анимация идет так как надо.

Ссылка на codepen https://codepen.io/eigoso/pen/VwPpqKq

Видео того, что происходит (светиться должны только грани, а не вся монета, плюс монета перекрывает полосы над ней): https://youtu.be/bMGdXtHpdK0

body{
  background-color: #0E0F2C;
}

#foundBit {
            animation: levitate 1s ease-in-out infinite alternate;
        }
        #bitcoinLogo {
            animation: levitate 1s ease-in-out infinite alternate;
        }
        #lightingOne {
            animation: light 2s ease-in-out infinite alternate;
        }
        #lightingTwo {
            animation: light 2s ease-in-out infinite alternate;
        }
        #lightWires, #lightWiresTwo, #lightWiresThree {
            animation: lightWire 1.5s ease-in-out infinite alternate;
        }
        @keyframes levitate {
            from {
                transform: translateY(0px);
            }
            to {
                transform: translateY(20px)
            }
        }
        @keyframes light {
            from {
                opacity: 0;
            }
            to {
                opacity: 0.48;
            }
        }
        @keyframes lightWire {
            from {
                opacity: 0.55;
            }
            to {
                opacity: 1;
            }
        }

.text {
  display: block;
  p {
    
  max-width: 100px;
  }
}

5
  • скинул все что нужно, id элементов в свг уже прописаны
    – Глеб
    2 апр 2021 в 12:31
  • ну а как иначе? там свгшка на 1000 строк кода, мне их сюда вставлять?
    – Глеб
    2 апр 2021 в 12:33
  • ок, вот ссылка, но скажу сразу - там баг не воспроизводится, надо в хроме запускать и смотреть. codepen.io/eigoso/pen/VwPpqKq
    – Глеб
    2 апр 2021 в 12:43
  • спасибо, но когда ее просвечивает становится уже не так красиво
    – Глеб
    2 апр 2021 в 12:49
  • вот держи видео: youtu.be/bMGdXtHpdK0
    – Глеб
    2 апр 2021 в 12:53

2 ответа 2

2

Оптимизировал код до одного знака после десятичной запятой с помощью SBGOMG

введите сюда описание изображения

Всё равно в сниппет здесь не помещается, ограничение 30.000

Разместил codepen

Работает во всех современных браузерах, включая Edge

1
  • возьму на вооружение, благодарю
    – Глеб
    3 апр 2021 в 14:52
1

Не знаю, костыль или нет, но решил тем, что задал элементам, которые перекрывает биткоин, анимацию, которая делает transform: scale(1), то есть ничего не делает. Благодаря этому, все встает на свои места и всегда работает как надо. Ох уж эти svg

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.