Webkit bug: translate3d positioning doesn't activate browser scrollbars

April 27, 2011

Webkit bug: translate3d positioning doesn't activate browser scrollbars

After some frustration in Safari and Mobile Safari, I found that by setting a -webkit-transform: translate3d() to position the y-coordinate of an html element beyond the browser window height, it will not cause the browser to activate its scrollbars. However, by switching to the web-standards css top style, this problem is alleviated. This seems like a browser bug to me.

Consider the following css, in both desktop and mobile Safari:

<html>
<head>
  <style>
    .notbroken {
      position:absolute;
      top:10000px;
    }
    .broken {
      position:absolute;
      -webkit-transform: translate3d(0px, 10000px, 0px);
    }
  </style>
</head>
<body>
  <div class="notbroken">Scrollbars, please.</div>
</body>
</html>

Both css classes position the div 10,000 pixels down the page, but if you use the .broken version, you won't get scrollbars, and you'll never be able to see the content.

2 comments:

danmuxAugust 17, 2011 at 11:41 AM
the same defect affects the copy paste events...
http://stackoverflow.com/questions/5792630/ipad-web-app-cant-select-copy-paste-into-an-input-field-after-css-transform/7096969#7096969
ReplyDelete
Replies
Jos GerritsMay 16, 2013 at 3:59 AM
I know its an old post but the correct answer is not given yet. It's not a bug, css3 translate's don't take up space in the dom.

This means it will never cause a scrollbar to appear.
ReplyDelete
Replies

Add comment