fadeTo 与 Jquery 在 Retina Macbook Pro 上的 Chrome 中不起作用

Posted 2023-05-09

【中文标题】fadeTo 与 Jquery 在 Retina Macbook Pro 上的 Chrome 中不起作用

【英文标题】：fadeTo with Jquery not working in Chrome on Retina Macbook Pro

【发布时间】：2015-05-20 18:53:51

【问题描述】：

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

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

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

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

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

知道为什么会发生这种情况吗？为什么这在我的 Retina 屏幕上的行为与在我的显示器上的行为不同（都使用相同版本的 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>

【问题讨论】：

可以在 stacksn-ps 中包含html 吗？

刚刚添加了 HTML 和 CSS。

尝试使用.stop(false, true) jsfiddle.net/JdbhV/1179 api.jquery.com/stop/#stop-clearQueue-jumpToEnd

我仍然在我的视网膜屏幕上看到同样的奇怪行为。

【参考方案1】：

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

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