SimalamMike

In the site that I am creating there are elements that are animated that don't require to have a z-index set. They are animated along side that elements that require a z-index set to be clickable by a user. The effect I am creating is a parallax effect where clickable items are in behind the foreground layer. I have tried to get this functionality to work with a z-index on the parallax images, and then having higher z-index on the clickable items with no luck. The only thing that seems to work is not having a z-index set on anything other than the clickable items to bring them up in front. After using the rotation it has caused all the elements that have a standard animation to get an z-index set only in safari and the iPad. Even after the rotated element is not on the page. This has caused the items to not be clickable after the rotation. I understand what your saying in regard to the item still being rotated at 360. I took a quick look at the source code and it looks like once the rotation animation is called the variable "_reqSafariFix" is set and the z-index will get set on all further animations. Is there a way to reset this variable. In my particular use case the safari fix is no longer needed in because after the rotation the element is no longer on the page.

Thanks Jonathan, Never thought of of just setting it to an empty string. Didn't realize that would actually just clear the item. I always thought it had to be a value. The issue still stands that after using the rotation animation other animations that didn't require a z-index property will get a z-index. I suppose I could set a clearProps on every single animation. Would that cause any performance issues when using many animations?

Here's a codepen that demonstrates the issue in safari: http://codepen.io/mikes000/pen/DgGtz First the boxes are moved and only the left style is applied. No z-index required for this animation. Second the first box is rotated and the z-index is applied while animaiton, on complete the z-index is removed. Third the second box is moved again using the same animation as the first, but this time a z-index is applied to the animation. Thanks!

Hello, I am having an issue where the z-index that gets applied to fix some of the bugs in safari. Some of the elements on the site I am creating depend on a specific z-index set in the CSS. It seems that the only animation that I am using which requires this z-index is a rotation, and it is used only once on my site. Once I have used this animation I have added some JavaScript to remove the z-index that is set inline after this animation is completed, which works great. The problem is that after this animation is used, other animations that didn't need this fix before are applying the z-index now! Does anyone know how to prevent this? Thanks, Mike Gibbons