Bug 91426 – No overflow scrollbars with 3d transform until the window is resized

• Component: CSS
• Status: NEW

[Chris Drackett]

I often use absolute positioned elements with overflow: scroll for UI elements. Recently on a project we've been doing animation and I noticed that if a 3D transform is added to one of these elements, no scrollbars are shown.

I have a test case here:

http://jsfiddle.net/fmTMv/2/

if you remove the -webkit-transform: translate3d(0, 0, 0); line, scrollbars will again be shown.

[Simon Fraser (smfr)]

I seem to recall another bug on this.

[Chris Drackett]

I just did a search and found this:

https://bugs.webkit.org/show_bug.cgi?id=85647

which includes this case as part of the description, but is slightly different from the main issue of the other bug.

[Radar WebKit Bug Importer]

<rdar://problem/11913575>

[Simon Fraser (smfr)]

I see scrollbars on the jsFiddle testcase in Safari 6 on Mountain Lion. They can be offset if there's a shadow (bug 85647). But this bug is fixed.

[Chris Drackett]

I'm on Safari Version 6.0.1 (8536.26.13) on 10.8.2 and see no scrollbar. Are you looking at the "content content content" div in the result section (lower right)?

[Simon Fraser (smfr)]

Chris: do they appear if you resize the window?

[Chris Drackett]

ah, they do! if I resize the window they start working, but on initial load I don't have the bar.

[Simon Fraser (smfr)]

Chris: to clarify, on initial load you don't see a flash of the bar (known issue), but if you scroll, do you see the scrollbar?

[Chris Drackett]

right,

on load:

- no bar flash
- no bar when scrolling

on resize:

- bar flashes as long as I scrolled in the div before resize

after resize:

- bar is shown on scroll

[Evan Chaney]

Created attachment 319649 [details]
Test case illustrating absence of scrollbars on initial load

Attaching additional test case (webkit-91426-test-case.html).

To observe the issue:

1. Open new window in Safari. Adjust window height to be less than or equal to 1440px. Do not adjust the window size after this point.
2. Open webkit-91426-test-case.html in the window.
3. Press “Toggle Menu” button to cause a menu to slide in from the right-hand window edge.
4. Attempt to scroll through the contents of the menu.