stacking-context-transform-none-animation-with-preserve-3d.html 551 B

123456789101112131415161718192021222324252627
  1. <!DOCTYPE html>
  2. <title>
  3. Transform animation creates a stacking context even though it has only
  4. 'transform:none' keyframes and with a style which prevents performning
  5. the animation on the compositor.
  6. </title>
  7. <style>
  8. span {
  9. height: 100px;
  10. width: 100px;
  11. position: fixed;
  12. background: green;
  13. top: 50px;
  14. }
  15. @keyframes TransformNone {
  16. from, to { transform: none }
  17. }
  18. #test {
  19. width: 100px; height: 100px;
  20. background: blue;
  21. transform-style: preserve-3d;
  22. animation: TransformNone 100s infinite;
  23. }
  24. </style>
  25. <span></span>
  26. <div id="test"></div>