I can apply the following style rule to a class and it renders: -webkit-box-reflect: below 0px -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), color-stop(0.55, transparent), to(white)) 0 0 0 0 stretch stretch;}} but when I move that same rule within a -webkit-keyframes as part of -webkit-animation, it no longer renders. See style rules in the URL doc head: http://jsbin.com/itukeq/7
To see a version in which the object renders with a box reflection, see: http://jsbin.com/itukeq/8 which sets the rule on the object outside of the keyframe and animation rules.
By using the test case from URL field - http://output.jsbin.com/itukeq/7, I am able to reproduce this in Safari Technology Preview 153 and it does not show "reflection" below the A and B pills while Chrome Canary 107 does. Firefox Nightly will ignore because of -webkit- prefixes so I am not posting result about it and comparing with Chrome only. I am going to change it to "New" and will tag others to confirm the issue and change the Component to "Animation" as well. Thanks!
<rdar://problem/99828709>