У меня возникли некоторые проблемы с веб-сайтом, которые возникают только в Safari. Я использую версию 5.1.7 (7534.57.2) на Mac.
Вы можете просмотреть сайт здесь: http://mcad.edu/annual-report-2011-12 /.
Веб-сайт использует параллаксную прокрутку с относительным позиционированием содержимого div, в котором содержится все, включая 3 фона параллаксной прокрутки, все фиксированные, верхний и левый установлены на 0.
В контейнерах с фиксированным фоном параллакса раскрашенные изображения превращаются в полноцветные изображения, когда пользователь наводит на них курсор. Для каждого «изображения» есть два сложенных элемента div, каждый из которых имеет фоновые изображения, расположенные по фоновому положению. Div внизу имеет раскрашенное изображение. Блок div сверху имеет полноцветное изображение в качестве фона, а его непрозрачность установлена на 0 до наведения курсора мыши. Затухание достигается с помощью CSS-перехода свойства opacity, так что верхний div становится видимым.
Таким образом, только в Safari, когда я навожу указатель мыши на любой из этих div, переход происходит плавно, но весь контент в одном и том же фоновом div с прокруткой параллакса сдвигается/прыгает в процессе. Если я уберу переход CSS, этого не произойдет.
Я думаю, что это может быть как-то связано со свойством перехода/вебкита-перехода, которое плохо работает с контейнером с фиксированной позицией в Safari. Тем не менее, все проблемы, которые я обнаружил, относятся к этому с 2010 года и упоминают ошибку Safari, которая, как я полагаю, была исправлена… два года спустя. А может и нет.
Также есть еще одна проблема с разделом Catalyst (3-я точка внизу справа). Эти анимированные изображения работают как ссылки в Chrome, Firefox и Opera, но не в Safari. Любые идеи?
