Question

我创建了一个左右滚动的动态表，具有可调整大小的列，具有固定的标题等。此表适用于我尝试过的每个浏览器。即使IE8看起来也不错（缺少功能，但仍然很好）。

当我尝试在Macbook上查看Safari 7.0.4中的表时会出现此问题。

附件应该是什么样的（为了演示目的，固定标题位于底部）：

enter image description here

滚动时，固定的标题，正文和固定滚动条都通过一些jQuery scrollLeft()函数连接（滚动一个，滚动全部）：

var tableHeaderSpace = $('.table-full-wrap-space'),
    tableHeader = $('.table-full-wrap-header'),
    tableBody = $('.table-full-wrap-body'),
    tableScroll = $('.table-full-wrap-scroll');

tableScroll.bind('scroll', function() {
    tableHeader.scrollLeft(tableScroll.scrollLeft());
    tableBody.scrollLeft(tableScroll.scrollLeft());
});

tableHeader.bind('scroll', function() {
    tableScroll.scrollLeft(tableHeader.scrollLeft());
    tableBody.scrollLeft(tableHeader.scrollLeft());
});

tableBody.bind('scroll', function() {
    tableScroll.scrollLeft(tableBody.scrollLeft());
    tableHeader.scrollLeft(tableBody.scrollLeft());
});

$(window).bind("scroll", function() {
    var tableHeaderOffset = tableHeaderSpace.offset().top;
    if (this.pageYOffset >= tableHeaderOffset) {
        tableHeader.addClass('isFixed');
    } else {
        tableHeader.removeClass('isFixed');
    }
});

同样，这很有效......但是当您向右滚动一点时，浏览器会开始复制该固定标头内的内容：

enter image description here

问题在于没有实际的＆＃39;内容正在被复制 - 这是某种显示重复的浏览器片段 - 不需要在DOM中添加元素。

下一张图片是浏览器正在做更多的事情＆＃34;魔术＆＃34;。在水平滚动的某些点，整个固定标题的颜色被反转：

enter image description here

我无法获得它的快照，但它也曾经复制过＆＃34;记录计数＆＃34;它下面的酒吧。

任何人都有任何想法在这里发生了什么？我试图在jsFiddle中复制它，但没有骰子。从那以后，我会认为这是我的代码的一个问题，但结果只有mac上的一个特定浏览器（safari），它正在做一些STRANGE的东西。

最后一点 - 由于我无法在jsFiddle中复制此内容，因此我不确定如何向Apple报告此内容（工作（或者＆＃39;已损坏的＆＃39;）示例是专有的我无法访问它。）

编辑：这里是我尝试复制问题的jsfiddle（非常粗糙 - 但它的功能）：

jsFiddle Duplication Attempt

Answer 1

所以 - 我知道这不是一个热门话题，但我想我还是会继续这样做。

至于答案，我发现了一些旧的表格css与我的新东西重叠 - 这反过来又以某种方式将Safari变得如此糟糕以至于它正在破碎它。

以前的旧代码：background: transparent;

新代码：background: #fff;

这对我没有意义 - 但在其他人提出假设之前，我会将此标记为答案。

现在我是最糟糕浏览器的头号竞争者：safari - 向外看，IE。

Mac Safari 7渲染问题scrollLeft（）问题

1 个答案: