Заранее извиняюсь, это мой первый вопрос SO.
У меня есть простой слайдер, который состоит из нескольких элементов списка (li), каждый из которых содержит Google Chart.Каждая диаграмма Google по сути является iFrame с элементами SVG внутри, которые составляют диаграмму.Каждая диаграмма имеет определенный размер набора.Использование переходов CSS3 объясняется тем, что jQuery работает медленно, как патока на iPad, особенно на iPad 1:
<ul class = "slider">
<li>{Google Chart 1}</li>
<li>{Google Chart 2}</li>
<li>{..and so on}</li>
</ul>
У меня есть следующий код для iPad, связанный с кнопкой ссылки для перемещения слайдера
var toMove = container.find('ul.slider');
//For purposes of this example I'm setting this to 300. In reality this is calculated by the index of the slider and the width of each chart
var pixelsToMoveBy = 300;
toMove.css('-webkit-transition', '-webkit-transform 0.5s linear, margin-left 0.5s linear');
toMove.css('-webkit-transform', 'translate3d(' + pixelsToMoveBy + 'px, 0px, 0px)');
Это прекрасно работает в настольных Chrome и Safari (как для Mac, так и для ПК), но на iPad будет отображаться только первый график, а следующие графики будут невидимы, и я понятия не имею, почему.Возвращаясь к способу jQuery:
toMove.animate({ marginLeft: pixelsToMoveBy + "px" }, 500);
.. будет работать нормально.Если я сделаю следующее
toMove.find('iframe').contents().find('body').css('background-color', 'red');
или даже
toMove.find('iframe').contents().find('#chartarea').css('background-color', 'green');
Тогда я смогу увидеть, что iFrame и диаграмма существуют, но элементы SVG, похоже, не отображаются.
Может кто-нибудь объяснить мне, почему я не вижу другие графики?
ОБНОВЛЕНИЕ 3
Я сделал простой HTML-файл, который иллюстрируетэта проблема.Он использует iScroll, который эффективно использует преобразования webkit:
http://reactiondynamics.com/lab/ipad.html
Только первый iFrame будет отображаться на iPad.Второй урезан, а остальные не отображаются.Однако он отлично работает во всех других браузерах на рабочем столе.
ОБНОВЛЕНИЕ 2: В основном я пытаюсь получить то же самое, что скроллер Apple, но как он работает на iPad, чтоесть, плавно.
ОБНОВЛЕНИЕ:
При поиске документа Safari я нашел цитату ниже здесь
Примечание: элементыс переполнением, установленным на скрытый, не могут визуализировать свои дочерние элементы в 3D, и отображаются так, как если бы стиль преобразования был установлен как плоский.
Похоже, что это не может быть сделано тогда, потому что в "плоском""режим, графики не отображаются.