相同的代码，但在不同的视图中表现不同

Question

I have created a fiddle , and it works fine in all browsers I have tested. ¹

However, when I try the same fiddle in the whole page view ( /show ), the fiddle suddenly starts doing weird things such as some animations are not animating asexpected, and this only happens on Chrome (tested on Chrome 33).

I'm pretty sure the code is the same.

To make sure they are using the same code, I visited the exact same URL of the preview window . The result is the same, however.

This has been bugging me, I don't see any reason behind this causing this behavior to happen.

¹ Except Internet Explorer.

Answer 1

Try the following: 1>prefix -webkit, -moz and -o for transformStyle: "preserve-3d" and perspective: '150px' ie -webkit-transform-style:preserve-3d and -webkit-perspective:150px repectively. I observer you have not done that

2>Right click on chrome icon->properties->compatibility->disable visual theme, toggle the value of disable visual theme and check if your animation works as expected. After changing value of disable visual theme you need to restart chrome