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
Post a Comment