输入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