webkit-transform overwrites z-index ordering in Chrome 13

by

Solved it myself through trial and error. Thought I’d report back if someone else stumbles upon this problem. It shall still be noted that this problem did not occur before Chrome updated itself to Chrome 13 (13.0.782.107m).

The trick here seems to be to add a translate3d operation to the underlying <div> (sq2) element upon declaration (or atleast before animating sq1).

Otherwise, the translate3d operation on the overlying <div> (sq1) will cause rendering to ignore the z-index and place sq1 below sq2. I’m guessing that this is because sq1 is defined before sq2 in the DOM, therefore sq2 will be rendered above it.

So, the solution seems to be to put translate3d in the definition of the <div>:s (add it to both just to be clear):

HTML:
<div id="sq1" style="z-index:10; -webkit-transform: translate3d(0px, 0px, 0px);">
<div id="sq2" style="z-index:5; -webkit-transform: translate3d(0px, 0px, 0px);">

More Related Contents:

  1. Get the real width and height of an image with JavaScript? (in Safari/Chrome)
  2. Force DOM redraw/refresh on Chrome/Mac
  3. How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?
  4. jqGrid does not render correctly in Chrome/Chrome Frame
  5. JSFiddle code not working in my own page
  6. Get element CSS property (width/height) value as it was set (in percent/em/px/etc)
  7. Video auto play is not working in Safari and Chrome desktop browser
  8. “Uncaught TypeError: a.indexOf is not a function” error when opening new foundation project
  9. How do I re-trigger a WebKit CSS animation via JavaScript?
  10. JavaScript: Is there a way to get Chrome to break on all errors?
  11. Set Webkit Keyframes Values Using Javascript Variable
  12. Webkit-based blurry/distorted text post-animation via translate3d
  13. How to use CSS (and JavaScript?) to create a blurred, “frosted” background?
  14. Firing a keyboard event on Chrome
  15. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  16. Open Safari / Google Chrome developer tools programmatically from JavaScript
  17. Cannot access cssRules from local css file in Chrome 64
  18. HTML book-like pagination
  19. Prevent Address-Bar hiding in mobile Browsers
  20. programmatically changing webkit-transformation values in animation rules
  21. Webkit and jQuery draggable jumping
  22. How to inject CSS into webpage through Chrome extension?
  23. jQuery in Chrome returns “block” instead of “inline”
  24. Javascript / Chrome – How to copy an object from the webkit inspector as code
  25. Print repeating Page headers in Chrome [closed]
  26. Synchronous console logging in Chrome
  27. “Unsafe JavaScript attempt to access frame with URL…” error being continuously generated in Chrome webkit inspector
  28. Freeze Header until Irrelevant (HTML, CSS and JS)
  29. How can I make window.showmodaldialog work in chrome 37?
  30. CSS /JS to prevent dragging of ghost image?

Leave a Comment