input type = "color" в Safari отстает

Question

Я разработал веб-сайт, где пользователь может изменить его дизайн. У меня есть 4 цветовых ввода для заголовков, текста, цвета ссылки и фона. Цвет фона должен отличаться от других.

$(".in1").change(function() {
        //if user changes not bc
        if ($(this).attr('id') != 'bg-color-input') {
            if ($(this).val() == $("#bg-color-input").val()) {
                $("#bg-color-input").val(getRandomColor());
            }
        } else {
            if ($(this).val() == $("#header-color-input").val()) {
                $("#header-color-input").val(getRandomColor())
            }
            if ($(this).val() == $("#main-color-input").val()) {
                $("#main-color-input").val(getRandomColor());
            }
            if ($(this).val() == $("#link-color-input").val()) {
                $("#link-color-input").val(getRandomColor());
            }
        }
    })
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row form-group">
                        <div class="col">
                            <div>
                                <label class="text-black" for="subject">Main text color</label>
                                <input type="color" value="#A8A8A8" class="in1" id="main-color-input">
                            </div>
                            <div>
                                <label class="text-black" for="subject">Link color</label>
                                <input type="color" value="#00d2b5" class="in1" id="link-color-input">
                            </div>
                        </div>
                        <div class="col">
                            <div>
                                <label class="text-black" for="subject">Header text color</label>
                                <input type="color" value="#000000" class="in1" id="header-color-input">
                            </div>
                            <div>
                                <label class="text-black" for="subject">Background color</label>
                                <input type="color" value="#ffffff" class="in1" id="bg-color-input">
                            </div>
                        </div>
                    </div>

Проблема: когда я меняю цвет ссылки, текста или заголовка, а затем меняю цвет фона на тот же цвет, я получаю эту картинку: Цвет фона не изменяется, но цвет ввода совпадает с цветом другого ввода.

Веб-сайт: http://usite.tech