CSS анимация точки доступа работает на всех устройствах. Кроме Iphone не работает

Question

Мне нужна помощь по проекту, над которым я работаю. У меня проблемы с Iphone. На всех остальных устройствах точки доступа работают. вы можете видеть на iphone версии стека браузера, что тень представляет собой квадрат, который, как и на всех других устройствах, должен быть закруглен. проблема в. https://www.schock.de/ горячие точки домашней страницы на мобильных устройствах. в Инспекторе вроде все работает, это только если посмотреть на Iphone !!!!

IPhone хотспотов версия работает на всех устройствах

    <div @if.isNotBackendContext={!node.context.inBackend} class="product__hotspot" style={props.styleCoordinates}>
            <a href={props.link} class="product__hotspot--link">

                <span class="product-hotspot">
                    <svg class="hotspot-img" width="50" height="50" viewBox="0 0 41 42" fill="none"
                         xmlns="http://www.w3.org/2000/svg">
                    <ellipse cx="20.5833" cy="21.2286" rx="10.8088" ry="10.8" fill="white"/>
                    <path
                        d="M39 21.2286C39 31.3891 30.7561 39.6286 20.5833 39.6286C10.4106 39.6286 2.16667 31.3891 2.16667 21.2286C2.16667 11.0681 10.4106 2.82855 20.5833 2.82855C30.7561 2.82855 39 11.0681 39 21.2286Z"
                        stroke="white" stroke-width="3"/>
                    </svg>
                </span>

                <span class="product__hotspot--title">
                    {props.titleText}
                </span>
            </a>
        </div>

        <div @if.isNotBackendContext={node.context.inBackend} class="product__hotspot backend"
             style={props.styleCoordinates}>
            <div @if.isNotBackendContext={node.context.inBackend} class="product__hotspot--link">
                {props.title}
            </div>
            <div class={props.saveButtonClass}>Save position</div>
        </div>



    .image-with-hotspots {
    position: relative;

    .hotspot-container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .product__hotspot {
        position: absolute;

        &.backend {
            text-align: left;

            .product__hotspot--link {
                background-color: $color-primary;
                padding: 10px;
                color: $white;
                font-size: 12px;

                &:hover {
                    width: 50px;
                }
            }

            .save-btn {
                background-color: $color-green-light;
                color: $white;
                padding: 10px;
                font-size: 12px;
                cursor: pointer;

                &:hover {
                    background-color: $color-green-dark;
                }
            }
        }

        .product__hotspot--link {
            width: 50px;
            height: 50px;
            display: inline-block;
            border-radius: 40px;
            outline: 0;
            transition: all 0.3s linear;

            @include media-breakpoint-down(sm) {
                width: 30px;
                height: 30px;
            }

            &:hover {
                width: auto;
                background-color: $color-primary;


                .product__hotspot--title {
                    opacity: 1;
                }
            }

            .product-hotspot {
                position: relative;
                width: auto;
                display: inline-block;

                .hotspot-img {
                    animation: pulse 2s infinite;
                    box-shadow: 10px 10px 10px rgba(255, 255, 255, 1);
                    -webkit-appearance: none;
                    border-radius: 100% !important;

                    &:hover {
                        animation: none;
                        box-shadow: none;
                    }

                    @include media-breakpoint-down(sm) {
                        width: 30px;
                        height: 30px;
                    }

                }
            }

            .product__hotspot--title {
                opacity: 0;
                font-family: $font-family-gotham-bold;
                font-size: 13px;
                color: $white;
                padding: 0 20px;
                text-transform: uppercase;

                @include media-breakpoint-down(sm) {
                    font-size: 10px;
                    padding: 0 8px;
                }
            }
        }
    }
}


@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
        transform: scale(1.1);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
        transform: scale(1)

    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        transform: scale(1);
    }
}

    @include media-breakpoint-down(sm) {
        @keyframes pulse {
            0% {
                -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
                transform: scale(1.1);
            }
            70% {
                -moz-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
                box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
                transform: scale(1)
    
            }
            100% {
                -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
                transform: scale(1);
            }
        }
       
    
    }