处理背景图像径向过渡在 chrome 中不起作用？

Question

我已经从纯粹的 css 中创建了一个涟漪效果，它以前在所有浏览器中都运行良好，现在看来它目前在 chrome 中无法运行，但在其他浏览器中可以正常运行（不包括 I.E，我不测试那个垃圾）好奇为什么会这样？我已经用尽了我的资源来了解 chrome 中正在发生的事情，现在它可以正常工作了。

<a href="javascript:void(0)" class="btn-shadow btn-ripple">Button</a>

[class^="btn"],
[class*=" btn"]
    display inline-flex
    font-family 'Roboto', sans-serif
    text-decoration none
    justify-content center
    align-items center
    text-align center
    cursor pointer
    white-space nowrap
    padding 8px 20px
    font-size 14px
    background-color white
    border-radius 2px
    color #434A54
    text-transform uppercase
    border none
    box-shadow 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
    transition all 0.4s ease-in-out
    background-position 50%
    outline none !important // we don't like outlines, nasty hobbits...
    &:before {
        content: '';
        position: absolute;
        background: red;
    }
    &:not([disabled])
        &.btn-shadow
            &:active
                box-shadow 0 5px 10px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.23)
        &.btn-ripple
            transition all 0.4s ease-in-out
            background-size 200%
            &:active
                background-repeat no-repeat
                background-size 1000%
                background-image radial-gradient(circle, rgba(0, 0, 0, .1) 10%, rgba(0, 0, 0, 0) 11%)

看到它发生在这里： http://codepen.io/brycesnyder/pen/gPojeO?editors=1100

谢谢！

Answer 1

你的问题很有意思

查看 Firefox 和 Chrome 我能够重现您所描述的内容。

阅读背景大小后想到的最简单的解决方案property docs in W3schools

您忘记定义 x 和 y 新尺寸 background-size value

试试这个：

&.btn-ripple
    transition all 0.4s ease-in-out
    background-size 200% 200%
&:active
    background-repeat no-repeat
    background-size 1000% 1000%

将这些值添加到您附加的代码笔中，我能够在 Chrome 51 中正确看到转换。

希望对您有所帮助

处理背景图像径向过渡在 chrome 中不起作用？

Manipulating background-image radial transition not working in chrome?

css

transition

google-chrome

css-transitions