在視網膜Macbook Pro上的Chrome中，fadeTo與Jquery不兼容
[英]fadeTo with Jquery not working in Chrome on Retina Macbook Pro
問題描述
我正在嘗試使用jQuery在滾動div（不是主窗口）中的元素淡出視圖時淡出它們。 我正在使用fadeTo函數並在用戶滾動時檢查元素的位置。
請參閱此stackoverflow線程以獲取我基於代碼的內容 。
在非視網膜顯示器（使用Chrome）上，一切似乎都可以正常運行。 top元素正像其應有的那樣在滾動div的頂部逐漸消失。
但是，當我使用帶視網膜顯示屏的Macbook Pro執行相同的操作時，會出現奇怪的行為。 對於滾動div中的某些元素（不是全部），fadeTo動畫僅使div的一部分（底部）褪色。 上半部分（有時更多）不變。
編輯：可以進行演示 （嘗試在監視器和視網膜屏幕上觀看演示）。
知道為什么會這樣嗎？ 為什么這在我的視網膜屏幕上和在顯示器上（兩者都使用相同版本的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 aa 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>
1 個解決方案
解決方案1
0 已采納 2015-03-21 04:47:09
我發現的解決方案是添加位置： .volleyCommentStatus，.volleyReplyStatus在css中的相對位置 。
似乎是繼承位置：我認為是靜態的導致了視網膜屏幕問題。
Retina Macbook Pro 的 WebGL 性能問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.