Bug 93068 – Clearing display:none before visibility:hidden on a scroll region can cause content to be partially hidden

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

Created attachment 156264 [details]
Demonstrates the listview content being partially hidden after hiding then showing listview

See attached html page for the repro.

In our listview, we have logic to hide and show the listview. The listview is hidden by setting display:none, and visibility:hidden. The listview is then shown by first clearing display:none, then visibility:hidden. We require this order of setting these styles in order to support other features. After we do this, the listview content is partially hidden under the scrollbar for the listview. 

Issue repros if we set CSS in the following order:
1. display: none; visibility: hidden;
2. display: block
3. visibility: visible

Issue does NOT repro if we set CSS in the following order:
1. display: none; visibility: hidden;
3. visibility: visible
2. display: block

We cannot change the order we set the css for functional requirements.

This bug repros on Chrome on Windows, and Chrome & Safari on Mac and iOS devices.
Does not repro on latest versions of Firefox or IE

Note: This also seems to be related to custom scrollbar styles we use for the listview, using -webkit-scrollbar.

When width and height are set using -webkit-scrollbar, then this bug repros, without -webkit-scrollbar, it doesn't repro.

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.