Jquery 的 fadeTo 在 Retina Macbook Pro 上的 Chrome 中不工作

Question

我正在尝试使用 jQuery 淡出滚动 div（不是主 window）中的元素，因为它们滚动出视图。我正在使用 fadeTo 函数并在用户滚动时检查元素的位置。

See this Whosebug thread for what I'm basing my code on.

我的非 Retina 显示器（使用 Chrome）似乎一切正常。顶部元素在滚动的顶部逐渐淡出 div，就像它应该的那样。

但是，当我使用带视网膜显示屏的 macbook pro 执行相同的操作时，出现了奇怪的行为。对于滚动div中的部分元素（不是全部），fadeTo动画只淡出div的一部分（底部）。上半部分（有时更多）没有变化。

编辑：WAS ABLE TO MAKE A DEMO（尝试在显示器和视网膜屏幕上观看演示）。

知道为什么会这样吗？为什么这在我的视网膜屏幕上与在我的显示器上表现不同（两者都使用相同版本的 Chrome）？

我还应该提到所有这些 html 都被注入到现有网页中，因此滚动条 div 位于页面右上角的顶部（固定位置） .我正在构建一个 chrome 扩展...我的代码：

$('#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>

Answer 1

我找到的解决方案是在 css 中添加 position: relative for .volleyCommentStatus, .volleyReplyStatus.

它似乎继承了 position: static 我认为是导致视网膜屏幕问题的原因。

Jquery 的 fadeTo 在 Retina Macbook Pro 上的 Chrome 中不工作

fadeTo with Jquery not working in Chrome on Retina Macbook Pro

javascript

jquery

css

google-chrome

retina-display