I'm trying to use jQuery to fade out elements in a scrolling div (not the main window) as they scroll out of view. I'm using the fadeTo function and checking for the position of the element as the user scrolls.
See this stackoverflow thread for what I'm basing my code on.
Everything seems to work fine on my non-retina monitor (using Chrome). The top element is fading out right at the top of the scrolling div like its supposed to.
However, when I perform the same actions using my macbook pro w/ retina display, I get weird behavior. For some of the elements (not all) in the scrolling div, The fadeTo animation only fades a part of the div (the bottom part). The top half (or more sometimes) is unchanged.
EDIT: WAS ABLE TO MAKE A DEMO (Try viewing demo on monitor vs. retina screen).
Any idea why this would happen? Why would this behave differently on my retina screen than on my monitor (both using same version of Chrome)?
I should also mention that all of this html is being injected into existing web pages, so that the scroll div sits on top of the page in the top right corner (fixed position). I'm building a chrome extension... My code:
$('#volleyThreadDiv' + objectId).scroll(function() {
console.log('userDidscroll...');
$('.volleyComment').each(function () {
var height = $(this).css('height');
var heightNumeric = height.substring(0, height.length - 2);
heightNumeric = Number(heightNumeric);
if ($(this).position().top + heightNumeric < 130) {
$(this).stop().fadeTo(0, 0.2);
} else {
$(this).stop().fadeTo(0, 100);
}
});
$('.volleyReply').each(function () {
var height = $(this).css('height');
var heightNumeric = height.substring(0, height.length - 2);
heightNumeric = Number(heightNumeric);
if ($(this).position().top + heightNumeric < 130) {
$(this).stop().fadeTo(0, 0.2);
} else {
$(this).stop().fadeTo(0, 100);
}
});
});#volleyDiv {
position:fixed;
top: 20px;
right: 30px;
padding: 10px;
z-index: 999999999999999999999999999;
box-sizing: initial;
background: none;
border: none;
}
.volleyThreadDiv, #volleyActivityDiv {
position: static;
display: none;
max-height: 300px;
overflow-y: scroll;
background: none;
border: none;
}
.volleyThreadDiv::-webkit-scrollbar, #volleyActivityDiv::-webkit-scrollbar {
background-color: transparent;
}
.volleyComment, .volleyReply {
margin: 5px 5px 5px 5px;
padding: 5px;
border: 2px solid #63c5e2; /* blue border */
border-radius: 8px;
width: 155px;
background: white;
box-shadow: 0px 2px 1px #888888, -2px 2px 1px #888888;
box-sizing: initial;
}
.volleyCommentStatus, .volleyReplyStatus {
padding: 0px 5px 0px 5px;
margin: 0px 0px 0px 0px;
font-family: 'Avenir Next', Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #262626;
line-height: 1.5;
word-wrap: break-word;
}
.volleyCommentStatus, .volleyReplyStatus {
text-align: left;
}
.volleyCommentStatus > a:link, .volleyReplyStatus > a:link, .volleyCommentStatus > a:visited, .volleyReplyStatus > a:visited {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-weight: normal;
color: #63c5e2 !important;
text-decoration: none !important;
border: none;
padding: none;
margin: none;
background-color: white !important;
}
.volleyCommentStatus > a:hover, .volleyReplyStatus > a:hover {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-weight: normal;
color: gray !important;
text-decoration: none !important;
border: none;
padding: none;
margin: none;
background-color: white !important;
}
.volleyCommentAuthor, .volleyReplyAuthor, .volleyCommentDate, .volleyReplyDate {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-style: italic;
font-size: 10px;
font-weight: normal;
color: gray;
margin: 0px 5px 0px 0px;
line-height: 1.5;
}
.volleyReplyAuthor {
clear: both;
text-align: left;
padding: 0px 5px 0px 5px;
}
.volleyCommentAuthor {
clear: both;
text-align: left;
padding: 0px 5px 0px 5px;
}
.volleyCommentDate, .volleyReplyDate {
float: right;
margin: 0px 5px 0px 7px;
}
.volleyCommentReply {
float: right;
border: 2px solid #63c5e2; /* blue border */
border-radius: 8px;
background: #63c5e2;
padding: 2px 10px 2px 10px;
margin: 0px 0px 100px 0px;
font-family: 'Avenir Next', Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: white;
box-shadow: 0px 2px 1px #888888, -2px 2px 1px #888888;
box-sizing: initial;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="volleyDiv" style="display: block;">
<div class="volleyThreadDiv" id="volleyThreadDivUAuCOyQuav" style="display: block;">
<div class="volleyComment" id="volleyCommentUAuCOyQuav">
<p class="volleyCommentDate">Feb 28th</p>
<p class="volleyCommentStatus">First comment!</p>
<p class="volleyCommentAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReply0wblbTaP1R">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">First comment!</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReplywBS0WFoUDH">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Testing two comments on a a page.</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReply5zw2ww9GBo">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Will it blend?</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReplythWrBLrkjy">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Stay with me.</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyCommentReply" id="volleyCommentReplyUAuCOyQuav">Reply</div>
</div>
</div>
</body>
</html>
