Javascript 带有Jquery的fadeTo在MacBookPro上的Chrome中不起作用

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

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

然而，当我使用MacBookPro w/retina显示器执行相同的操作时，我会有奇怪的行为。对于滚动div中的某些元素（并非全部），fadeTo动画仅淡入div底部的一部分。上半部分或更多部分有时是不变的

编辑：尝试在显示器和视网膜屏幕上查看演示

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

我还应该提到，所有这些html都被注入到现有的web页面中，因此scroll div位于页面右上角的固定位置。我正在构建一个chrome扩展。。。我的代码：

$'volleyThreadDiv'+objectId.scrollfunction{ console.log'userdidcoll…'； $'.volleyComment'.eachfunction{ var height=$this.css'height'； var heightNumeric=height.substring0，height.length-2； heightNumeric=数字heightNumeric； 如果$this.position.top+高度数值<130{ $this.stop.fadeTo0，0.2； }否则{ $this.stop.fadeto01100； } }; $'.volleyReply'.eachfunction{ var height=$this.css'height'； var heightNumeric=height.substring0，height.length-2； heightNumeric=数字heightNumeric； 如果$this.position.top+高度数值<130{ $this.stop.fadeTo0，0.2； }否则{ $this.stop.fadeto01100； } }; }; 截击{ 位置：固定； 顶部：20px； 右：30px； 填充：10px； z指数：999999999999999999999； 盒子尺寸：初始尺寸； 背景：无； 边界：无； } .截击，截击活动{ 位置：静态； 显示：无； 最大高度：300px； 溢出y：滚动； 背景：无； 边界：无； } .volleyThreadDiv:：-webkit滚动条，volleyActivityDiv:：-webkit滚动条{ 背景色：透明； } .截击评论，.截击回复{ 保证金：5px 5px 5px 5px； 填充物：5px； 边框：2个实心63c5e2；/*蓝色边框*/ 边界半径：8px； 宽度：155px； 背景：白色； 盒影：0px 2px 1px 88888，-2px 2px 1px 88888； 盒子尺寸：初始尺寸； } .截击评论状态，.截击回复状态{ 填充：0px 5px 0px 5px； 保证金：0px 0px 0px 0px； 字体系列：“Avenir Next”，Helvetica，无衬线； 字体大小：12px； 字体大小：正常； 颜色：262626； 线高：1.5； 单词包装：打断单词； } .截击评论状态，.截击回复状态{ 文本对齐：左对齐； } .volleyCommentStatus>a:link、.volleyReplyStatus>a:link、.volleyCommentStatus>a:visited、.volleyReplyStatus>a:visited{ 字体系列：“Avenir Next”，Helvetica，无衬线； 字体大小：正常； 颜色：63c5e2！重要； 文字装饰：无！重要； 边界：无； 填充：无； 保证金：无； 背景色：白色！重要； } .volleyCommentStatus>a:悬停，.volleyReplyStatus>a:悬停{ 字体系列：“Avenir Next”，Helvetica，无衬线； 字体大小：正常； 颜色：灰色！重要； 文字装饰：无！重要； 边界：无； 填充：无； 保证金：无； 背景色：白色！重要； } .volleyCommentAuthor、.volleyReplyAuthor、.volleyCommentDate、.volleyReplyDate{ 字体系列：“Avenir Next”，Helvetica，无衬线； 字体：斜体； 字体大小：10px； 字体大小：正常； 颜色：灰色； 保证金：0px 5px 0px 0px； 线高：1.5； } .截击回答者{ 明确：两者皆有； 文本对齐：左对齐； 填充：0px 5px 0px 5px； } .截击{ 明确：两者皆有； 文本对齐：左对齐； 填充：0px 5px 0px 5px； } .volleyCommentDate、.volleyReplyDate{ 浮动：对； 保证金：0px 5px 0px 7px； } .截击回答{ 浮动：对； 边框：2个实心63c5e2；/*蓝色边框*/ 边界半径：8px； 背景：63c5e2； 填充：2x10px 2x10px； 保证金：0px 0px 100px 0px； 字体系列：“Avenir Next”，Helvetica，无衬线； 字体大小：10px； 字体大小：正常； 颜色：白色； 盒影：0px 2px 1px 88888，-2px 2px 1px 88888； 盒子尺寸：初始尺寸； }

2月28日

第一条评论

约翰·韦克斯勒

2月28日

第一条评论

约翰·韦克斯勒

2月28日

在一个页面上测试两条评论

约翰·韦克斯勒

2月28日

< p class=volleyReplyStatus>它会混合吗

约翰·韦克斯勒

2月28日

和我在一起

约翰·韦克斯勒

回复

---

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

---

似乎是继承了位置：静态，我认为这是导致视网膜屏幕问题的原因。

可以在stacksnippets中包含html吗？刚刚添加了html和CSS。尝试使用.stopfalse，true。我仍然在视网膜屏幕上看到相同的奇怪行为。