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:
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:
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:
Why is this happening? Note that this only happens in Chrome... Firefox, IE, Safari, and Opera all display the page properly.
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>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>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:
Why is this happening? Note that this only happens in Chrome... Firefox, IE, Safari, and Opera all display the page properly.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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.
ASKER
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.
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-visibil
Here is more info about chrome settings and other hidden stuff: http://www.howtogeek.com/104631/find-hidden-features-on-chromes-internal-chrome-pages/
/*-webkit-backface-visibil
Here is more info about chrome settings and other hidden stuff: http://www.howtogeek.com/104631/find-hidden-features-on-chromes-internal-chrome-pages/
ASKER
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.
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.
I got same results on windows 8.1 Pro and windows 7 Ultimate.
ASKER
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.
At least I have a resolution for it.
ASKER
My own research led to a resolution.
ASKER