Chrome 上完全不同位置的光滑滑块弄乱了字体

Slick slider messing with font in complete different location on Chrome

光滑的滑块在 Chrome

上完全不同的位置弄乱了字体

非常奇怪的情况。 当我的光滑滑块转到下一个/上一个图像时,其中有一个带有红色标题的 3 列块,字体变暗一点,然后随着滑块完成滑动一个元素而恢复正常。

字体看起来像“闪烁”

我尝试了什么:

没有任何效果。

它在 Firefox 和 IE 中工作正常,但在 Chrome 中不行 - 无法在 safari 中测试,但有人告诉我那里发生了同样的事情。

我的Chrome - 版本:87.0.4280.66

我真的不知道我还能做什么。

这是正在发生的事情的 GIF:

简化的源代码(正在执行 | Slick 已经启动)

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=10">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="robots" content="all,follow">
    <link rel="stylesheet" href="//cdn.componentator.com/spa.min@14.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,700">
    <link rel="stylesheet" href="/widgets.css?ts=gnt3q">
    <script src="//cdn.componentator.com/spa.min@14.js"></script>
    <meta name="keywords" content="Node.js, eshop, ecommerce, Total.js">
    <meta name="author" content="Peter Širka">
    <link type="text/css" rel="stylesheet" href="/default/css/bootstrap.min.css">
    <script src="/default/js/bootstrap.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/default/css/slick.css">
    <script src="/default/js/slick.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/default/css/default.css">
    <link type="text/css" rel="stylesheet" href="/default/css/style.css">
    <script src="/default/js/default.js"></script>
    <script src="/default/js/custom.js"></script>
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>

<body data-jc="exec,binder,modificator">
    <div data-jc="loading" class="ui-loading hidden">
        <div></div>
    </div>
    <div data-jc="shoppingcart" data-jc-path="shoppingcart" data-jc-config="discount:0"></div>
    <div data-jc="message" data-jc-config="button:Schließen" class="ui-message hidden"></div>
    <div data-jc="autocomplete" class="ui-autocomplete-container hidden">
        <div class="ui-autocomplete" style="max-height: 200px;">
            <ul></ul>
        </div>
    </div>
    <div class="header-spacer"></div>
    <main class="main" style="min-height: 939px;">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <section class="body">
                        <div>
                            <div></div>
                            <div class="productslider">
                                <div class="row slick-initialized slick-slider"><button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="">Previous</button>
                                    <div class="slick-list draggable">
                                        <div class="slick-track" style="opacity: 1; width: 2400px; transform: translate3d(-1280px, 0px, 0px);">
                                            <div class="col-md-3 slick-slide slick-cloned" data-slick-index="-6" aria-hidden="true" style="width: 80px;" tabindex="-1">
                                                <a href="#test1" tabindex="-1">
                                                    <div class="product">
                                                        <p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
                                                    </div>
                                                </a></div>
                                            <div class="col-md-3 slick-slide slick-cloned" data-slick-index="-5" aria-hidden="true" style="width: 80px;" tabindex="-1">
                                                <a href="#test1" tabindex="-1">
                                                    <div class="product">
                                                        <p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
                                                    </div>
                                                </a></div>
                                            <div class="col-md-3 slick-slide slick-cloned" data-slick-index="-4" aria-hidden="true" style="width: 80px;" tabindex="-1">
                                                <a href="#test1" tabindex="-1">
                                                    <div class="product">
                                                        <p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
                                                    </div>
                                                </a></div>
                                            <div class="col-md-3 slick-slide slick-cloned" data-slick-index="-3" aria-hidden="true" style="width: 80px;" tabindex="-1">
                                                <a href="#test1" tabindex="-1">
                                                    <div class="product">
                                                        <p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
                                                    </div>
                                                </a></div>
                                            <div class="col-md-3 slick-slide slick-cloned" data-slick-index="-2" aria-hidden="true" style="width: 80px;" tabindex="-1">
                                                <a href="#test1" tabindex="-1">
                                                    <div class="product">
                                                        <p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
                                                    </div>
                                                </a></div>
                                            <div class="col-md-3 slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" style="width: 80px;" tabindex="-1">
                                                <a href="#test1" tabindex="-1">
                                                    <div class="product">
                                                        <p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
                                                    </div>
                                                </a></div>
                                            
                                        </div>
                                    </div><button class="slick-next slick-arrow" aria-label="Next" type="button" style="">Next</button>
                                </div>
                            </div>
                            <div></div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </main>
    <footer class="">
        <div class="container">
            <hr><br>
            <div class="row" style="
                font-size: 40px !important;
            ">
                <div class="col-md-4 text-md-left text-center">
                    <h2>TEXT 1</h2>
                </div>
                <div class="col-md-4 text-md-center text-center">
                    <h2>TEXT 2</h2>
                </div>
                <div class="col-md-4 text-md-right text-center">
                    <h2>TEXT 3</h2>
                </div>
            </div>
        </div>
    </footer>
    <div class="scrollToTop" style="display: none;"></div>
</body>

</html>

也许你知道为什么会这样/你有同样的问题

非常感谢, 因为我已经花了几个小时调试这个...

给页脚 position: relative;z-index: 1; 通过这种方式,您可以将元素从堆叠上下文中取出,这通常可以解决问题。