Chrome中奇怪的文档正文右填充问题答案

【问题标题】：Weird document body right padding issue in ChromeChrome中奇怪的文档正文右填充问题
【发布时间】：2013-02-08 14:36:19
【问题描述】：

由于某种原因，在页面加载后尝试使用 JavaScript 更改 padding-right 值时，文档正文右填充无法正确更新。看看这个演示问题的小提琴。

HTML

<html><body><div></div></body></html>

JavaScript

// Workaround #1: changing right padding without timeout
//$(document.body).css('padding-right', '100px');
setTimeout(function () {
    // This doesn't work properly (at least for me) in Chrome on Ubuntu 12.04
    $(document.body).css('padding-right', '100px');
    // Write info in body that function was executed
    $(document.body).append('timeout function executed');
    // Workaround #2: write content into div
    //$('div').append('timeout function executed');
    // Workaround #3: set document body display to none and back to block via zero ms timeout
    /*$(document.body).css('display', 'none');
    setTimeout(function () {
        $(document.body).css('display', 'block');
    }, 0);*/
}, 1000);

http://jsfiddle.net/gyqEK/2/

我可以通过一些变通方法使右侧填充的更改生效

调整浏览器窗口大小
将文档正文显示切换为无，并通过零毫秒超时功能返回块
将一些 HTML 内容写入 div（在小提琴示例中）

我尚未在 Windows Chrome 上对此进行测试，但在 Ubuntu 12.04 Chrome 版本 24 上我能够重现此问题。在 Firefox 上不会出现此问题。其他人面临同样的问题，有人可以确认这是否也发生在其他操作系统和/或 Chrome 版本上？

更新

我更新了一个新的小提琴，它现在更接近我想要实现的原始想法。当“某事”完成时（在这种情况下单击 div），我希望文档正文右填充以或多或少的平滑动画变化。这在 Firefox 中完美运行，但无法在最新的 Chrome 中运行。

$('div').click(function () {
    var jqBody = $(document.body);
    if (jqBody.css('padding-right') !== '200px') {
        jqBody.animate({
            'padding-right': '200px'
        }, 500);
    } else {
        jqBody.animate({
            'padding-right': '0'
        }, 500);
    }
});

http://jsfiddle.net/gyqEK/5/

更改文档正文右填充是否有意义是另一个问题。我的目标是将所有页面内容从右边缘移动 200 像素，以便为绝对定位的侧边栏 div 元素保留一些空间。我通过将我的页面内容包装到 div 元素中来实现这一点，而不是 body padding-right 我现在正在更改包装器 div 元素的右边距。这种方法也适用于 Chrome。

【问题讨论】：

也不适用于 Windows。奇怪的错误！

标签： javascript jquery google-chrome

【解决方案1】：

它以某种方式连接到页面加载过程。除非您知道页面已完全加载，否则您不能真正希望成功运行 JQuery。您需要确保所有 Jquery 在初始“就绪”事件之后运行。

如果你用这个替换你的代码：

$(document).ready(function(){
    setTimeout(function () {
        $(document.body).css('padding-right', '100px');
        // Write info in body that function was executed
        $(document.body).append('timeout function executed');
       },1000);
});

...它在 Chrome 和其他浏览器中的工作方式完全符合预期（在 Ubuntu 12.04 上测试了 Firefox 和 Chrome）

【讨论】：

显然也不需要“settimeout()”，如果这是试图“破解”Chrome 的行为（我去过那里......;-)）。我把它留在里面，以防你通过超时获得一些功能。
试图在 jQuery 中的元素出现在代码中之前访问它们而不使用 $(document).ready() 是自找麻烦。现在世界上所有的 setTimeouts 都帮不了你了。
您可以在jsfiddle.net/gyqEK/4 使用“DOM 就绪”方法测试更新的小提琴，但它仍然对我不起作用。如果我需要访问 DOM 元素，我永远不会依赖于生产环境中的超时与 DOM 就绪。最初我测试了 $(document).ready() 方法，但是当它对我不起作用时，我测试了超时，当它也失败时，我就把它留在那里。不过，关于 $(document).ready() 的观点很好，我感谢您的反馈。
我也刚刚读到 jsFiddle 将 JavaScript 面板中编写的所有代码包装到 $(window).load() 中，我通过阅读源代码验证了这一点。所以在这种情况下 $(document).ready() 是不需要的，因为所有的 JavaScript 代码实际上是在稍后（在 DOM 准备好之后）在 window 中发生加载事件时执行的。

【解决方案2】：

两年前有人偶然发现了同样的错误，这个解决方案对我有用。

https://stackoverflow.com/a/3485654/1532332

我无法相信为什么 Chrome 没有解决这个问题。无论如何，这是一个更新的小提琴，其中填充动画也适用于 Chrome。代码可以更干净，但我懒得整理：)

$('div').click(function () {
    var jqBody = $(document.body);
    if (jqBody.css('padding-right') !== '200px') {
        jqBody.animate({
            'padding-right': '200px'
        }, {
            duration: 500,
            step: function () {
                this.style.display = 'none';
                this.offsetHeight;
                this.style.display = 'block';
            }
        });
    } else {
        jqBody.animate({
            'padding-right': '0'
        }, {
            duration: 500,
            step: function () {
                this.style.display = 'none';
                this.offsetHeight;
                this.style.display = 'block';
            }
        });
    }
});

http://jsfiddle.net/gyqEK/6/

这里肯定有一个缺点。在每个动画步骤中，元素的显示切换为无，读取 offsetHeight 并将显示切换回块。这也会导致诸如 Firefox 之类的浏览器的开销，这些浏览器在动画主体填充方面没有任何问题。另外，我不确定这样的东西是否可以用于非块元素，但在我的情况下我不需要担心。

【讨论】：