css - Why part of an 'absolute' positioned DIV element in a table cell is not shown (in Google Chrome only) -


to demonstrate issue, below html file displays tall div (named div1), initial hidden, , button show or hide div1. open in google chrome, click on button show div. notice div displayed, there no way see lower part because tall fit in window , chrome not display scroll bar.

if open in firefox, there no such issue. firefox displays scroll bar when div1 shown can scroll see lower part.

<html> <head>   <script src="http://api.prototypejs.org/javascripts/pdoc/prototype.js" type="text/javascript"></script> </head> <body>   <input type="button" onclick="$('div1').toggle();" value='toggle'></input>   <table>     <tr>       <td>         <div style="position:relative">              <div style="position:absolute">                <div id='div1' style="position:absolute; height:1500px; width: 200px; border: 1px solid gray; display:none"></div>           </div>         </div>       </td>     </tr>   </table> </body> </html> 

i found had table element , first div. if either remove table/tr/td tags or change style of first div "position: relative" "position:absolute", google chrome display scroll bar properly. unfortunately, in project, not affect lot of elements in page.

it looks bug in chrome? there other workarounds/fixes?

this occurs in safari.

changing position of div wrapping #div1 absolute relative fix this:

      <div style="position:relative">            <div id='div1' style="position:absolute; height:1500px; width: 200px; border: 1px solid gray; display:none"></div>       </div> 

Comments

Popular posts from this blog

objective c - Change font of selected text in UITextView -

php - Accessing POST data in Facebook cavas app -

c# - Getting control value when switching a view as part of a multiview -