Weird CSS issue with disappearing content in Chrome

Please see http://delivery.binkcms.com/home-page-login.html for the demo.  Click the orange cart button in the upper right to display the cart details flyout.

The site uses several z-index settings to make sure flyouts are stacked properly.  Originally, I had the cart details flyout  as a top-level element:
<!-- edited for brevity -->
<body>
  <div id="top-container">...</div>
  <div id="cart-bar-flyout">...</div>
</body>

Open in new window


That worked OK for the most part, but the flyout menus in the far upper-right (account menu and help menu) were obscured by the cart flyout.  To resolve this, I moved #cart-bar-flyout inside #top-container:
<body>
  <div id="top-container">
      <header id="header">...</header>
      <section id="main-navigation-bar">...</section>
      <main id="main-content">...</main>
      <footer id="footer">...</footer>
      <div id="cart-bar-flyout">...</div>
  </div>

Open in new window


That did exactly what I wanted, with the proper z-index settings, but I hit this weird glitch where the content of #cart-bar-flyout disappears if you scroll the main page.  See the two images below:

Correctly displays when scrolled to the top of the pageContent disappears after scrolling partially through the main page
Why is this happening?  Note that this only happens in Chrome... Firefox, IE, Safari, and Opera all display the page properly.
LVL 52
Steve BinkAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Steve BinkAuthor Commented:
After some research and experimentation, I've found that adding -webkit-backface-visibility:hidden to #cart-bar-flyout resolves the issue.  Can anyone explain why it is needed?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SSupremeCommented:
It is a bug in chrome, sometimes it by default doesn't work in some versions and OSes.
Steve BinkAuthor Commented:
Can you point me to any source material on the bug?
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

SSupremeCommented:
https://code.google.com/p/chromium/issues/detail?id=348295

Your demo works fine without your fix on my 41.0.2272.76 m chrome win8.
I just assume that this could be the bug of Chrome.
Check your chrome version and check settings.
Steve BinkAuthor Commented:
My version is 41.0.2272.76 m, and the issue is still visible if I remove the fix.  There's not much in settings to affect this as far as I can see.
SSupremeCommented:
When I checked your demo I saw your "fix" I removed it and rechecked it was fine without your "fix". Now I see you canceled it out ( /* fix for strange "disappearing content" issue */
  /*-webkit-backface-visibility: hidden;*/) and I see it same with and without "fix".

Here is more info about chrome settings and other hidden stuff: http://www.howtogeek.com/104631/find-hidden-features-on-chromes-internal-chrome-pages/no issue without fix
Steve BinkAuthor Commented:
I still have the same problems in my Chrome without the fix.  Uncommenting the CSS line you referenced resolves the issue.  What platform are you using?

It's odd that this directive, which affects 3D transformations, would have an impact here.  Nothing on the page uses any transforms, unless you count z-index.  Well, it is what it is, I guess.
SSupremeCommented:
I got same results on windows 8.1 Pro and windows 7 Ultimate.
Steve BinkAuthor Commented:
My tests were with Chrome v40 & Chrome v41 on Win7 Ultimate and Professional.  All variations displayed the bug if the CSS fix was not applied.  Strange little thing.  

At least I have a resolution for it.
Steve BinkAuthor Commented:
My own research led to a resolution.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.