html - Chrome Scrollable Div Bug -

interesting bug in chrome. if scrollable div off screen when page loads, scrollable div not scrollable way of mouse wheel or touch pad gestures until given focus (by double clicking somewhere within element, or selecting text inside of it).

update bug documented here https://code.google.com/p/chromium/issues/detail?id=417345 remains unfixed of may 2015. thread provides interesting possible solutions javascript, see if has alternate suggestions fix, possibly not involving js

the bug when click on button "show side container", side container slide view, , main container slide out of view. if try scroll using mouse wheel or 2 finger gesture on laptop track pad, nothing happen. can use page , page down on keyboard however, these work. can of course use actual scroll by clicking on mouse.

in firefox , ie, can use mouse wheel scroll on element

example http://codepen.io/msorrentino/full/aoyaom/

html

<div class="wrapper">     <div class="page-container">         <button class="show-side">show side container</button>      </div>     <div class="side-container">         <button class="close-side">close side container</button>         <div class="large-content"></div>     </div> </div> 

css

 html,         body,         *,         *:after,         *:before {             margin: 0;             padding: 0;             box-sizing: border-box;         }          html, body {             height: 100%;         }          .wrapper {             position: absolute;             top: 0;             left: 0;             right: 0;             bottom: 0;             overflow: hidden;         }           .page-container, .side-container {             position: absolute;             top: 0;             left: 0;             right: 0;             bottom: 0;             border: 5px solid;             overflow-y: auto;             overflow-x: hidden;             -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.68, 0, 0, 1);             transition: -webkit-transform 0.2s cubic-bezier(0.68, 0, 0, 1), transform 0.2s cubic-bezier(0.68, 0, 0, 1);         }          .page-container {             -webkit-transform: translate(0,0);             transform: translate(0,0);         }          .page-container-hidden {             -webkit-transform: translate(-100%,0);             transform: translate(-100%,0);         }          .side-container {             -webkit-transform: translate(100%,0);             transform: translate(100%,0);         }         .side-container-visible {             -webkit-transform: translate(0,0);             transform: translate(0,0);         }          .large-content {             height: 2000px;         } 

js

$('.show-side').click(function(){             $('.page-container').addclass('page-container-hidden');             $('.side-container').addclass('side-container-visible');         });         $('.close-side').click(function(){             $('.page-container').removeclass('page-container-hidden');             $('.side-container').removeclass('side-container-visible');         }); 

it gets more interesting if make original "page-container" element have enough content force have overflow, "side-container" element no longer displays aforementioned bug! http://codepen.io/msorrentino/full/wvzgqz/

any thoughts on happening here welcome, , possible fixes welcome.

came across question when encountered similar problem off-screen menu moves on-screen when toggled.

here's relevant html , css, simplified:

<div class="menu">   <!-- long list of menu items here --> </div>  .menu {   position: fixed;   top: 0;   bottom: 0;   left: 0;   transform: translatex(-100%);   transition: transform ease 125ms; } .menu--active {   transform: translatex(0); } 

.menu--active toggled button.

though you're looking non-js solution, thought i'd post cleanest workaround i've found in case people end here same problem.

the workaround force focus state on div after transition has completed. this, first have give div tabindex can focused.

<div class="menu" tabindex="-1">   <!-- long list of menu items here --> </div> 

(a value of -1 should keep div out of normal tab order.)

then, using bit of delayed jquery, focus on div. should invoked along whatever logic use "activate" div.

settimeout( function() {   $('.menu').focus(); },150); 

the time here 150 milliseconds, after transition should have completed. value equal of transition duration work too, set longer safe.

a more complete example might be:

$('.menubutton').on('click', function() {   $('.menu').addclass('menu--active');   settimeout( function() {     $('.menu').focus();   },150); }); 

finally, won't want focus outline on focused div, might choose remove outline: none in style rule div. in project, not in original example in question, broke focus on div, , went being un-scrollable. did instead:

.menu:focus {   outline-color: transparent; } 

i forked original example , included solution here: http://codepen.io/johntobinme/full/mapmgy