Chrome 或引导 css 框阴影转换错误

Question

我不知道如何描述这不起作用的方式，所以我上传了一个截屏视频给你 YouTube。这真的很奇怪，我在网上找不到类似的东西。它仅发生在盒子阴影中，并且仅在启用转换时发生。它适用于过渡且无箱形阴影，适用于箱形阴影且无过渡。

编辑：我最初忽略了（我现在意识到这是这个解释的关键部分）是transition-delay是0s，transition-duration是150ms。不一定重要，但计时功能是缓入缓出。 devtools 计算样式面板显示没有覆盖任何这些属性。

这个

这可能是我的 css 的一个错误，但我无法想象什么样的错误会产生这个问题。

观看此视频进行演示。 Video Link on Youtube

注意：此视频是以正常速度拍摄的。

不应该存在悬停和转换之间的延迟，以及按钮按下和转换之间的延迟。有谁知道任何已知的“陷阱”、错误或检查可能是什么来源的地方？

注意：我很确定这不是我的代码的错误。我现在检查了 4 次，并在其他两个浏览器中成功测试了它——而且——它是一行简单的 css。我还在目录中查找了不同的潜在冲突——尽管我不确定要寻找什么。

编辑：根据请求。这是用于生成转换的代码。

.navbar-nav {
    li {
        text-align: center;
        a {
                border-radius: 0;
                border-width: 0 0 0 1px;
                border-style: solid;
                color: #808d8e !important;
                box-shadow: 1px 12px 23px hsla(0, 0%, 0%, 0.05) inset;
                border-color: darken(@neutral-light, 9%);
                -webkit-transition: all .15s ease-in-out;
                -moz-transition: all .15s ease-in-out;
                -o-transition: all .15s ease-in-out;
                -ms-transition: all .15s ease-in-out;
                transition: all .15s ease-in-out;
                &:hover {
                    border-color: darken(@neutral-light, 15%);
                    color: @brand-primary !important;
                    box-shadow: 1px 12px 23px hsla(0, 0%, 0%, 0.1)inset, 2px 2px 20px rgba(0, 0, 0, .1);
                    background-color: saturate(lighten(@neutral-light, 8%), 5%);
                }
                &:focus, &:active {
                    color: desaturate(@brand-primary, 5%);
                    background-color: saturate(lighten(@neutral-light, 4%), 0%);
                    box-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.3)inset, -1px -12px 23px hsla(0, 0%, 0%, 0.2), 2px 2px 23px rgba(0, 0, 0, .08);
                }
        }
    }
    li:hover + li>a {
        border-left-color: darken(@neutral-light, 15%);
    }
}

这更少，并且可以按照您的预期进行编译。

附加信息和注释：这发生在 41.0.2222.0 canary（64 位）上。

注意我发现了一个奇怪的怪癖。如果我设置一个否定的transition-delay，就会发生转换。但它以下列方式发生：很快背景颜色和颜色开始动画，并完成，并且在稍后的某个时间点（与以前大致相同）出现盒子阴影。但这是奇怪的事情 -有一个非常小的窗口可以工作（类似于 0.2 秒的差异），所以如果持续时间是.5s，并且我将转换延迟设置为-.4s，我会看到一个正常的转换，如上所述。在处理 100 毫秒的转换时，效果显然很微妙，但仍然很明显。但是，如果我将持续时间设置为 .5s 并将延迟设置为 -.1s，则转换仍然会有明显的视觉延迟。

Answer 1

有谁知道任何已知的“陷阱”、错误或需要检查的地方 >这可能是什么来源？

您使用简写语法将转换属性（/ies）设置为all，尝试用转换效果的属性列表替换。

transition: box-shadow .15s ease-in-out;

或

transition: box-shadow,background-color,color,border-color .15s ease-in-out;

all 可能触发（不希望出现的）transitionEnds 被 bootstrap 的 jQuery 插件捕获并影响性能。

见：http://youtu.be/SnZaGuxvEvE