Magento2: Div появляется как вспышка

Question

Я работаю над Magento2.2.4. Я знаю, что эта ошибка произошла на веб-сайте Magento, но она имеет CSS и Js. Так что я публикую здесь.

У меня есть два div'а на моем стати c блок один div для липкой правой стороны, а другой внизу справа. Когда я нажимаю на липкое изображение с правой стороны, должно появиться правое нижнее изображение, затем при нажатии на правое нижнее x изображение внизу должно появиться правое липкое изображение.

Правое липкое изображение с классом .float -image-contact и правый нижний div с классом .float-image-footer.

Так что я сделал некоторый скрипт для требования.

Но когда я загружаю страницу, правый нижний div появляется как фла sh. Это просто как мгновение. Он исчезнет в течение 0,5 секунд. И тогда требование как обычно работает.

Почему этот флаг sh появляется?

Мой код выглядит следующим образом:

<style xml="space"><!--
    .float-image-footer{
        position: fixed;
        bottom:0;
        right:0;
        z-index:9999;
        width:25%;
}
    .float-image-contact{
        position: fixed;
        top:30%;
        right:0;
        width:15%;
    }
    .float-image-contact >  img{
        border-radius:10px;
        float:right;
    }
    #xButton {
        color: #fff;
        position: absolute;
        font-weight: bold;
        right:0;
        float:right;
        padding: 8px 14px 0px 0px;
         }
@media screen and (max-width: 660px) {
         .float-image-contact{
               width:25%;
              }
             #xButton {
                  padding: 6px 6px 0px 0px !important;
                  }
             .float-image-footer{
              width:50% !important;
            }
         }

@media screen and (max-width: 768px) and (min-width: 661px){
             #xButton {
                  padding: 6px 8px 0px 0px !important;
                  }
         }

@media screen and (min-width: 1025px) and (max-width: 1366px) {
             #xButton {
                  padding: 10px 14px 0px 0px !important;
                  }
         }


@media screen and (min-width: 1370px) and (max-width: 1605px) {
             #xButton {
                  padding: 12px 84px 0px 0px !important;
                  }
         }


@media screen and (min-width: 1820px) and (max-width: 1920px) {
             #xButton {
                  padding: 14px 80px 0px 0px !important;
                  }
                  .float-image-footer{
                     margin-right:-61px;
                  }
         }




--></style>
<div class="row">
    <figure id="contact-image" class="float-image-contact">
        <img src="{{media url="wysiwyg/contact.png"}}" alt="Contact Image" width="40px" />
    </figure>
    <figure class="float-image-footer" >
        <button id="xButton">X</button>
        <a href="tel:1-833-286-3200">
            <img id="banner" src="{{media url="wysiwyg/POPUP3.png"}}" alt="Immediate Assistance" />
        </a>
    </figure>

<script type="text/javascript" xml="space">// <![CDATA[
                var date = new Date();
                var hours = date.getHours();
                var day = date.getDay();        

// ]]></script>
<script type="text/javascript" xml="space">// <![CDATA[
                function showButton(){
                    document.getElementById('xButton').style.display = 'none';   
                    document.getElementById('banner').style.display = 'none';   
                }
                    document.getElementById('xButton').addEventListener("click", function() {
                    document.getElementById('banner').style.display = 'none';
                    document.getElementById('xButton').style.display = 'none';
                    document.getElementsByClassName('float-image-contact')[0].style.display = "block";
                });
                setTimeout(showButton,-1);
// ]]></script>
<script type="text/javascript" xml="space">// <![CDATA[
                function shownewButton(){
                    document.getElementById('contact-image').style.display = 'block';   
                }
                    document.getElementById('contact-image').addEventListener("click", function() {
                    document.getElementById('banner').style.display = 'block';
                    document.getElementById('xButton').style.display = 'block';  
                    document.getElementById('contact-image').style.display = 'none';  
                });
// ]]></script>



</div>