DIV is disappearing in Google Chrome

HTML & CSS
1

I have a sliding div (slider) that appears on some click of button. The slider opens without any problem. Append a new content inside any element in slider, a scroll bar appears and when you scroll, the slider disappears, although the focus stays in it (if there is textbox, I can type in it). This glitch occurs in Google Chrome 35.0, but works in IE11, Firefox, Safari.

Here is JSFiddle.

Click on Launch button, a slider will open. Make sure that there is no scrollbar when it opens. Add new list item until scrollbar appears. Now scroll the page, suddenly the slider disappears. If you change any property of any element through developer tool, the slider appears again.

I have tried changing Overflow, Display properties, removing Transforms/Transitions, changing Z-Index etc.

Please help.

Ritesh

2

Hi,

It looks like another webkit transform bug because if you remove the properties I have commented out the layout works in chrome.


#site-canvas {
	width: 100%;
	height: 100%;
	position: relative;
[B]	/*-webkit-transform: translateX(0);
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;*/[/B]
}

I realise that those rules may be important for something I can’t see so you may not be able to remove them. Perhaps an alternative is to force a scrollbar for webkit.

e.g.


.show-nav #slide-overlay {
	display: block;
	overflow-x: hidden;
	overflow-y: auto;
}[B]
@media screen and (-webkit-min-device-pixel-ratio:0) {
 .show-nav #slide-overlay {overflow-y: scroll}
}
[/B]

webkit does seem to have issues with positioned elements and transforms in some cases (especially position:fixed) so I’m not sure there is a workaround as such.

3

Thank you Paul. I’ll see if I can play around without transforms. I thought it was something in my code, and I tried to make it work by changing all relevant properties in those selectors but all in that, a whole sleepless night, I seemed to have missed those you have pointed out. I thought Chrome is state-of-art browser, which can do nothing wrong.

Thanks for saving my neck.