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

Question

光滑的滑块在 Chrome

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

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

字体看起来像“闪烁”

我尝试了什么：

将 slick 降级回 1.6.0
删除 3 列块的所有类并设置每个元素的样式
不同window-sizes
不同的浏览器（Firefox 和 Internet Explorer）
验证 Source-Code（NU 检查器没有显示错误。）

没有任何效果。

它在 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>

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

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

Answer 1

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

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

Slick slider messing with font in complete different location on Chrome

javascript

html

google-chrome

bootstrap-4

slick.js