У меня есть небольшая ошибка в некотором HTML, которая появляется только в Firefox 17 (OSX 10.8.2, еще ни одна другая ОС не тестировалась). У меня есть класс "sidebar" css, который содержит некоторый текст, который является повторяющимся элементом на нескольких страницах. На одной странице (только) этот текст отображается так, как будто у него есть свойство css visiblility, установленное на "hidden" (оно не отображается, но оставляет правильное пространство вокруг себя).
left Firefox 16.0.2; право Firefox 17.0.1
Вот класс css:
.sidebar {
position:fixed;
top: 2px;
left:4px;
display:table-cell;
vertical-align:bottom;
z-index: 2;
width: 700px;
height: 64px;
-webkit-transform: rotate(90deg) translateX(320px) translateY(340px) scale(1);
-moz-transform: rotate(90deg) translateX(320px) translateY(340px) scale(1);
-o-transform: rotate(90deg) translateX(320px) translateY(340px) scale(1);
-ms-transform: rotate(90deg) translateX(320px) translateY(340px) scale(1);
transform: rotate(90deg) translateX(320px) translateY(340px) scale(1);
}
Затронутый HTML:
<div class="sidebar" >
<span class="TMUP1">
<a href="/">Section_Header</a>
</span>
<span class="sidebarcontents" style="vertical-align: 50%">
Subsection_Header
</span>
</div>
Все страницы сайта содержат идентичную часть асинхронного отслеживания javascript. Если я удалю этот код, ошибка исчезнет. Я проверил код и это правильно. Он используется на каждой странице сайта, а все остальные страницы с SAME html (это повторяющийся заголовок) отлично отображают
Код google js:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-000000-0']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Ошибка исчезает при любом из следующих условий
- просматривается в firefox 16 (те же настройки пользователя и плагины), либо в любом другом браузере.
- просмотр в firefox 17/безопасный режим
- удалить код Google Analytics
- замените следующую строку из класса "боковая панель" css
-moz-transform: rotate(90deg) translateX(320px) translateY(340px) scale(1);
с
-moz-transform: translateX(320px) translateY(340px) scale(1);
(т.е. удалить вращение)
Это не имеет никакого отношения к плагинам и аддонам, как будто я вручную отключил все эти ошибки, все еще очевидно.
Другие страницы с одним и тем же HTML, одинаковым css и одним и тем же кодом Google Analytics отлично выглядят.
Страница проблем является самой большой на сайте (~ 10 КБ оптимизированного /gzipped html с около 160 маленькими изображениями /880 КБ для загрузки), все остальные страницы меньше.
Тело почти полностью состоит из 160 повторов этого элемента
<div class= "outerDiv" style="background-color:transparent">
<div class="innerDiv">
<a href='/artists/artist_name/'>
<img src="/artists/artist_name/_portrait/artist_portrait.jpg" alt="" width="150" />
</a>
<div class="short_caption">
<a href='/artists/artist_name/' style="color:white">artist_name</a>
<br />artist_location
</div></div></div>
Если я решительно сократил количество этих элементов, это также исправляет ошибку.
Любые идеи о том, как дальше изолировать/исправить ошибку? На данный момент мне кажется, что мне придется либо жертвовать аналитикой, либо перепроектировать сайт, оба из которых кажутся немного чрезмерными.
Обновление
Я сделал намного больше исследований и понял, что это.
- Это не имеет никакого отношения к javascript google. ЛЮБОЙ script, даже пустой
<script></script>
вызовет ошибку. - Я использую пользовательские шрифты с @font-face, втянутыми из связанной таблицы стилей.
- Если я использую только системные шрифты, ошибка исчезает.
- Если я переместил правила @font-face из связанной таблицы стилей в заголовок страницы, ошибка станет более устойчивой: она появляется независимо от наличия тегов script
- отключите аппаратное ускорение, ошибка исчезнет.
- удалить поворот из преобразования, ошибка исчезнет.
- уменьшить размер страницы (от 160 изображений до 10), и ошибка исчезнет.
- Firefox nightly (v20) не показывает ошибку, так что все, что вызывает ее, исправлено в некоторой будущей версии после v17.0.1
Вот несколько примеров страниц, показывающих проблему (я избегал их в исходном вопросе, так как я предполагаю, что ссылка немного нахмурилась здесь). Кэш браузера должен быть опустошен между каждым просмотром страницы, чтобы точно оценить эффект ошибки.
- исходная страница bug present
- тестовая страница.
- упрощенный html и минимизированный css, чтобы изолировать ошибку
- нет javascript, но один пустой тег
<script></script>
Все эти образцы получены на тестовой странице:
-
<script></script>
тег удален ошибка отсутствует - вращение удалено из преобразования ошибка отсутствует
- размер страницы уменьшен с 160 до 18 изображений ошибка отсутствует
- нет настраиваемых шрифтов ошибка отсутствует
- внутренняя таблица стилей для пользовательских шрифтов bug present
- Это странно. Если таблица стилей @font_face является внешней, ошибка показывает только тег
<script></script>
. Если правила @font_face перемещаются во внутреннюю таблицу стилей, ошибка также проявляется в отсутствии тегов<script></script>
.
- Это странно. Если таблица стилей @font_face является внешней, ошибка показывает только тег
Я не могу устранить ошибку, не изменяя дизайн страницы до такой степени, что мне придется перепроектировать сайт, который кажется немного OTT для одной версии одного браузера. Я надеюсь на более практическое решение проблемы. Я пробовал использовать jQuery для браузера, но, как представляется, javascript вводит ошибку, которая не запускается.
обновление 2
Теперь у меня была возможность протестировать на другой машине, и найти ошибку проявляется очень редко. Тестирование как нового пользователя на исходной машине вообще не отображает ошибку. Таким образом, это явно связано с настройками пользователя, и, надеюсь, тогда - довольно редко.
обновление 3
Следуя предложению @Boris, я попробовал инкрементное вращение, чтобы увидеть, где и как разбивается страница. Это нормально от поворота (0deg) до примерно 80deg, после чего он начинает разваливаться. Я добавил границы 1px для всех элементов, чтобы помочь выделить проблему...
- примеры страниц, показывающие 0-90deg (они должны отскакивать от одного к другому при автоматическом обновлении).
Это использует-moz-transform
, поэтому стоит только посмотреть в Firefox. - анимация: это результат, который я получаю в firefox 17.0.1
обновление 4
отвечая на некоторые предложения от @arttronics - вот 3d firefox view, показывающий, как он должен складываться (когда я переключаюсь на 3D-просмотр, ошибка исчезает, как будто Firefox пытается сделать это чуть сложнее, чтобы делать правильные вещи).
- протуберативный контент, видимый в 3D-представлении, предназначен для выравнивания текста, он не влияет на ошибку - см. эту сокращенную версию;
- зум reset без изменений;
- новый профиль пользователя демонстрирует то же поведение.
обновление 5 - reset Firefox
После выполнения Firefox reset (в соответствии с ответом @arttronics) ошибка все еще здесь, хотя, возможно, немного менее устойчивая.
До reset это вызовет ошибку
- очистить кеш
- обновить страницу
Post- reset, очистка кеша и обновление освежают ошибку примерно в 50% случаев. Если я очищу кеш, перезапустите firefox, вернитесь на страницу - он все еще там, каждый раз.
Хорошо, я собираюсь ответить на свой вопрос... Я не нашел решения, но благодаря интересам и удивительным усилиям сообщества кажется мне довольно понятным, что...
- Это может быть проблема, которая очень трудно реплицировать за пределы особенностей моей настройки пользователя.
- это неясная ошибка, проявленная только в Firefox 17.0.1 и, по-видимому, исправленная в Firefox 18
- нет обходного пути, который не связан с редизайном сайта.
Поэтому, в интересах перехода к другим вопросам, я предлагаю положить этот вопрос на отдых! Благодаря всем, кто сделал замечания и предложения, это был очень учебный процесс.