Fail autoscrolling in Safari Desktop Browser
If you tested the site on Chrome, FF or IE(8) and resize the windows
(height) than can you see that scrollbar moves dynamically with the
content inside middle yellow box.
My problem is that in Safari, it does not resize properly.
Here is my fiddle
HTML:
<body>
<div id="message_box">
<div id="header"> Header </div>
<div id="content">
<ul id="msg_list">
<li>Test file</li>
<li>Test file</li>
<li>Test file</li>
<li>Test file</li> <!-- ...and so on -->
</ul>
</div>
<div id="footer"> Footer </div>
</div>
</body>
CSS:
html, body {
height: 100%;
}
#message_box {
width: 500px;
float: left;
}
#header {
width: 500px;
height: 50px;
background-color: #aaa;
text-align: center;
}
#content {
min-height: 150px;
width: 500px;
position: relative;
background-color: #ffa;
border: solid #cdd1d8;
border-width: 2px 0 2px 0;
overflow-y: scroll !important;
overflow-x: hidden;
}
#msg_list {
width: 100%;
position: absolute;
bottom: 100px;
margin-bottom: 50%;
left: 0;
display: block;
height: 1px;
}
#footer {
height: 300px;
padding: 10px;
background-color: #aaa;
text-align: center;
}
jQuery (v1.10.1):
$(document).ready(auto_size);
$(window).on("resize", auto_size);
function auto_size() {
var body_content_msg = $("body").height(),
header_content_msg = $("#header").height(),
footer_content_msg = $("#footer").height(),
newHeight = body_content_msg - header_content_msg -
footer_content_msg + "px";
$("#content").css("height", newHeight);
}
$(document).ready(function(){
$("#content").scrollTop($("#content")[0].scrollHeight);
});
Someone can me explain why this happens in Safari and how to handle this?
UPDATE:
You have to resize the window up/down to see that the "Test file // FIRST
MESSAGE //" disappear in Safari.
No comments:
Post a Comment