Button can’t work in safari but chrome can

I want to add a search button that when I click it, it can show a search box that user can type something in that search box, and system will find if there is a word similar to my locationName. The function work in chrome, but safari can’t. Please help me solve the problem, thanks.

HTML:

<div id="search-container" class="custom-search">
            <button id="search-icon" class="btn btn-link" aria-label="搜索">
                <i class="bi bi-search"></i>
            </button>
            <div id="search-box" style="display: none;">
                <div class="input-group">
                    <input type="text" id="search-input" class="form-control custom-input" placeholder="輸入店名...">
                    <button id="search-submit" class="btn btn-outline-secondary custom-button" type="button">Search</button>
                </div>
            </div>
        </div>

CSS:

#search-container {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
    color:#171717;
}

#search-icon {
    background: none;
    border: none;
    font-size: 24px;
    color: #fff; /* 白色圖標 */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /*添加陰影以增加可見度 */
}

#search-box {
    position: absolute;
    top: 100%;
    right: 0;
    padding: 10px;
    border-radius: 5px;
    width: 250px; /* 調整搜索框寬度 */
}

#search-input {
    background-color: #333; /* 深色背景 */
    color: #fff; /* 白色文字 */
    border: 1px solid #555;
}

#search-input::placeholder {
    color: #aaa; /* 淺灰色佔位符文字 */
}

#search-submit {
    background-color: #555; /* 深灰色按鈕背景 */
    color: #fff; /* 白色按鈕文字 */
    border: 1px solid #777;
}

#search-submit:hover {
    background-color: #666; /* 懸停時稍微亮一點 */
}

.custom-search .custom-input {
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
}

.custom-search .custom-input::placeholder {
    color: #aaa;
}

.custom-search .custom-button {
    background-color: #555;
    color: #fff;
    border: 1px solid #777;
}

.custom-search .custom-button:hover {
    background-color: #666;
}

javascript:

    // 搜尋店名按鈕

    document.addEventListener('DOMContentLoaded', function() {
        const searchContainer = document.getElementById('search-container');
        const searchIcon = document.getElementById('search-icon');
        const searchBox = document.getElementById('search-box');
        const searchInput = document.getElementById('search-input');
        const searchSubmit = document.getElementById('search-submit');
        searchBox.style.display = 'none'; // 确保初始时隐藏

        console.log('DOM加载完成，搜索元素:', {
            searchContainer: !!searchContainer,
            searchIcon: !!searchIcon,
            searchBox: !!searchBox,
            searchInput: !!searchInput,
            searchSubmit: !!searchSubmit
        });

        if (!searchContainer || !searchIcon || !searchBox || !searchInput || !searchSubmit) {
            console.error('无法找到搜索相关的DOM元素');
            return;
        }

        // 修改搜索图标点击事件
        searchIcon.addEventListener('click', function(event) {
            event.stopPropagation(); // 阻止事件冒泡
            console.log('搜索图标被点击');
            searchBox.style.display = searchBox.style.display === 'none' ? 'block' : 'none';
            console.log('搜索框显示状态:', searchBox.style.display);
        });

        // 修改搜索提交按钮点击事件
        searchSubmit.addEventListener('click', function(event) {
            event.preventDefault(); // 阻止默认行为
            event.stopPropagation(); // 阻止事件冒泡
            console.log('搜索提交按钮被点击');
            performSearch();
        });

        searchInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault(); // 阻止默认行为
                console.log('在搜索输入框中按下Enter键');
                performSearch();
            }
        });

        // 添加点击文档其他地方关闭搜索框的功能
        document.addEventListener('click', function(event) {
            console.log('点击事件触发，目标元素:', event.target);
            if (!searchContainer.contains(event.target)) {
                console.log('点击了搜索容器外部，关闭搜索框');
                searchBox.style.display = 'none';
            }
        });

        function performSearch() {
            console.log('执行搜索');
            const searchTerm = searchInput.value.toLowerCase().trim();
            console.log('搜索词:', searchTerm);
            const foundIndex = markers.findIndex(function(marker) {
                return marker.locationName.toLowerCase().includes(searchTerm);
            });

            if (foundIndex !== -1) {
                console.log('找到匹配的位置:', markers[foundIndex].locationName);
                openModal(foundIndex);
                searchBox.style.display = 'none';
                searchInput.value = '';
            } else {
                console.log('找不到匹配的位置');
                alert('找不到符合的店名');
            }
        }
    });

I tried add console.log in my searchIcon.addEventListener(‘click’, function(event) , but it doesn’t work in safari. Even though I click the bottom, it doesn’t show any information.