i have problem css on chrome. have table overflow , has pop button , pop has absolute position when clicked. working expected when running on firefox :
but run different on chrome : 
is there can fix chrome behaviour? same behaviour firefox?
additional : use bootstrap project. here table made :
<table class="table table-striped table-bordered table-hover"> and here td of button :
<td> <div class="btn-group dropdownn"> <button id="dlabel" type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dlabel" id="tombol_action"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> and here css modified when pop opened:
<style> .dropdownn.open{ position: absolute; } </style> please check this, have made prototype http://jsfiddle.net/gjtcyl7y/3/
fixed : http://jsfiddle.net/gjtcyl7y/10/ ashish
$(document).ready(function(){ $('.mydropdown').on('shown.bs.dropdown', function (e) { var mybtn = $(this); var offset_t = $(this).offset().top - $(window).scrolltop(); var offset_l = $(this).offset().left - $(window).scrollleft(); console.log(offset_l, offset_t); mybtn.find(".dropdown-menu").css({"position":"fixed","left":offset_l,"top":offset_t + mybtn.height()}); }); $('.mydropdown').on('hidden.bs.dropdown', function () { var mybtn = $(this); mybtn.find(".dropdown-menu").removeattr("style"); }); $("#wrap").on("scroll", function(e) { var mybtn = $('.mydropdown.open'); var offset_t = $(mybtn).offset().top - $(window).scrolltop(); var offset_l = $(mybtn).offset().left - $(window).scrollleft(); mybtn.find(".dropdown-menu").css({"position":"fixed","left":offset_l,"top":offset_t + mybtn.height()}); }); });<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <!-- jquery (necessary bootstrap's javascript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- include compiled plugins (below), or include individual files needed --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div style="width:850px; overflow: scroll;height:450px;" id="wrap"> <table class="table table-striped table-bordered table-hover" id="example" ccellpadding="0" cellspacing="0" border="0" width="100%"> <thead> <tr> <th>head1</th> <th>head2</th> <th>head3</th> <th>head4</th> <th>head5</th> <th>head6</th> <th>head7</th> <th>head8</th> </tr> </thead> <tbody> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> <tr height="48px"> <td>1</td> <td>gabriel</td> <td>some value here</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td>some value here , little longer</td> <td> <div class="btn-group mydropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-cog"></span> pilih <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="link/1" title="view spk"> <span class="glyphicon glyphicon-check"></span> view spk</a></li> <li><a href="link/1" title="edit spk"> <span class="glyphicon glyphicon-edit"></span> edit spk</a></li> </ul> </div> </td> </tr> </tbody> </table> </div>