Css 设置背景位置动画：Safari无法设置底部

我需要通过CSS动画将背景图像的y属性从像素维度设置为“底部”。虽然这在Chrome和FF中运行良好，但在Safari中似乎不起作用。我也尝试过“100%”，它同样适用于Chrome和FF，但不适用于Safari

我在网上翻了不少，但找不到任何明确的文档说明Safari不支持将此属性设置为底部动画，但这似乎是它的行为

有人能解释一下这一点吗？和/或证实这确实是不可能的

这里有一把小提琴可以自己测试它：

不幸的是，我需要实现这样的动画，因为包含的元素有一个可变的高度-我更愿意不使用任何js

谢谢， 迈克

@-webkit-keyframes mastheadBG {
    0% { background-position-y: 300px; }
    100% { background-position-y: bottom; }
}

.parent {
    width: 100%;
    height:30%;
    background-color: #aaa;
    background-image: url(http://coalescentdesign.com/_img/circle.png);
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-animation: mastheadBG 3.0s ease;
}