Mac Safari 7 Rendering Problem problem scrollLeft () - javascript, jquery, safari, scroll

Stworzyłem dynamiczny stół, który przewija się w lewo itak, ma zmienne kolumny, ma stały nagłówek itp. Ta tabela działa świetnie w KAŻDEJ przeglądarce, którą próbowałem. Nawet IE8 wygląda dobrze (brakuje funkcji, ale nadal dobrze).

Ten problem pojawia się, gdy próbuję wyświetlić tabelę w przeglądarce Safari 7.0.4 na moim Macbooku.

Załączone jest to, jak powinno wyglądać (stały nagłówek znajduje się na dole w celach demonstracyjnych):

kiedy przewijasz, stały nagłówek, treść i stały pasek przewijania są połączone za pomocą jQuery scrollLeft() funkcje (przewiń jedną, przewiń wszystkie):

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");
}
});

Ponownie działa to świetnie ... ale gdy przewijasz nieco więcej w prawo, przeglądarka zaczyna powielać zawartość w tym ustalonym nagłówku:

Problem polega na tym, że żadna „rzeczywista” treść nie jest kopiowana - jest to fragmentacja przeglądarki, która pokazuje duplikaty - bez dodawania elementów w DOM.

Kolejne zdjęcie to przeglądarka, która robi więcej „magii”. w niektórych punktach przewijania w poziomie kolory wszystkich stałych nagłówków zostają odwrócone:

Nie byłem w stanie uzyskać jego migawki, ale kiedyś zduplikowano pasek „liczenia rekordów” poniżej.

Czy ktoś ma jakieś pomysły, co się tutaj dzieje? Próbowałem powielić to w jsFiddle, ale żadnych kości. Na tej podstawie zakładam, że jest to problem z moim kodem, ale wyniki są tylko w JEDNEJ konkretnej przeglądarce na Macu (safari) i robi kilka dziwnych rzeczy.

Ostatnia uwaga - ponieważ nie mogę tego zreplikować w jsFiddle, nie jestem pewien, jak mógłbym to zgłosić Apple (działający (lub „zepsuty”) przykład jest zastrzeżony i nie mogę dać do niego dostępu).

EDYTOWAĆ: oto jsfiddle, w którym próbowałem zduplikować problem (bardzo szorstki - ale działa):

jsFiddle Próba duplikacji

Odpowiedzi:

0 dla odpowiedzi № 1

więc - wiedziałem, że to nie będzie gorące pytanie tematyczne, ale pomyślałem, że nadal dawałbym temu szansę.

jeśli chodzi o odpowiedź, znalazłem stare css tabeli, które pokrywały się z moimi nowymi rzeczami - co z kolei w jakiś sposób wyrzuciło safari tak źle, że fragmentowało je.

poprzedni stary kod: background: transparent;

nowy kod: background: #fff;

Nie ma to dla mnie sensu - ale dopóki ktoś inny nie wysunie hipotezy, zaznaczę to jako odpowiedź.

teraz mój najlepszy pretendent do najgorszej przeglądarki: safari - uważaj, IE.

---