更新 3 - 10/09/2013:刚刚对此进行Version 29.0.1547.66 m
了测试,问题仍然存在。如果其他人可以对此进行测试并让我知道结果会很棒。您需要一个内联元素,例如包含一些文本的跨度,使其相对定位并从左侧和顶部移动任意数量的像素。然后设置一些 jScript 以将元素的当前内部 html 更改为其他内容,您应该会看到它在视口中保持不变,但在 DOM 中正确更改。
更新 2:经过更多测试后,问题似乎出现在诸如 span 之类的内联元素上,或者具有使它们内联的 CSS,但也相对定位,似乎是这种组合导致了问题。在 Chromium 上发布错误后,它已被标记为 cr-Blink-Rendering 问题,这看起来是在浏览器视口中渲染 DOM 的引擎。我正在使用Version 29.0.1547.57
(当前版本以 .66 结尾,但我的版本因错误而未更新)。因此,如果您使用的是最新版本,则此问题可能不再存在。
更新:在进一步调查中,我认为问题出在最新的 Chrome 版本 29.0.1547.57 m 因为我在 IE9 和 Firefox 21 中以内联方式测试了该元素并且它运行良好。我已经为此提交了一份关于铬的错误报告
我遇到了一个问题(我无法使用 jsfiddle 重新创建),我在其中执行 ajax 请求,获取一些值并将它们放在我页面中存在的 span 元素中。
我有一个非常奇怪的问题,ajax 请求正在工作并将值带回。这些值通过 jQuerys .html' 方法插入到 span 元素中,当我使用 Chrome 开发人员工具检查 DOM 时,我可以看到 span 中的新值。
但是,我在页面上看到的并没有反映这一点,它仍然显示旧值。然而,如果我试图突出显示该值,它会立即更改为正确的值(显示在 DOM 中的值)。
我什至尝试在 ajax 调用之前更新 spans 值(因为我正在使用的值是从 jQuery UI 的滑块小部件获得的),但这仍然会产生相同的结果。
有没有其他人遇到过这个?
编辑:这是一些代码
HTML
<div id="NewLoanSliderAmount" class="NewLoanSliderRules"></div>
<span id="NewLoanSliderAmountDisplay" class="NewLoanDisplay">£600</span>
滑块代码。这是我尝试直接从滑块值更新它的版本
$("#NewLoanSliderAmount").slider({
value: amount,
min: 300,
max: amount,
step: 100,
change: function (event, ui) {
$("#NewLoanSliderAmountDisplay").html("£" + ui.value);
window.CkSpace.GetLoanValues();
}
});
这是ajax代码:
(function (CkSpace, $, undefined) {
CkSpace.GetLoanValues = function () {
var url = "/Home/UpdateAPR";
$.get(url, { Amount: $("#NewLoanSliderAmount").slider("value"), Length: $("#NewLoanSliderLength").slider("value") }, function (data) {
$("#NewLoanAmount").html("£"+data.LoanAdvance);
$("#NewLoanLength").html(data.LoanTerm);
$("#NewLoanMonthlyCost").html("£"+data.LoanInstalment);
$("#NewLoanTotal").html(data.LoanGrossRepyable);
$("#NewLoanAPR").html(data.LoanAPR+"%");
$("#NewLoanSliderAmountDisplay").html("£" + data.LoanAdvance);
});
}
} (window.CkSpace = window.CkSpace || {}, jQuery));
编辑2:
另一件需要注意的事情是,如果我在填充的跨度上设置一个断点并单步执行它,它每次都会在 Chrome 开发人员工具中完美更新