Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Багография браузеров. Баги,фичи IE, Opera, Firefox


Автор: Гость_12345 7.12.2005, 14:04
Что-то такой темы нет, а постоянно нужна, чтобы накапливать знания об особенностях поведения кодов.

Свежие наблюдения.
* MozOpacity (-moz-opacity) в Firefox (1.06) есть, но с ней сразу идут в комплекте особенности.
1. Баг перехода на 100%. Если быстро увеличивать непрозрачность (iframe) до 100%, то часто (при больших полях прорисовки, по крайней мере) окончательный переход на 100% (MozOpacity =1;) сопровождается кратковременным пропаданием и новой прорисовкой слоя. Наблюдается неблагопристойный скачок рисования изображения. Возможно, если всегда делать достаточную паузу перед последним переходом (с 0.9 на 1, с 0.95 на 1), этого не будет наблюдаться.
1.а. Но это полбеды. Беда в том, что в любом переходе на 100% _или_обратно_ теряется отображение всех полей ввода документа в iframe. Независимо от того, наблюдался ли визуальный скачок. Вывод - никогда не делать MozOpacity =1, если в слое есть формы.
3. Сильная зависимость от видеокарты. На посредственной карте обновление прозрачного слоя FF при смене прозрачности сильно тормозит. Например, на Ati Rage 128 Pro раза в 3-4 по сравнению с GeForce4. Если во втором случае скорости в FF и IE равны, в первом разница очень большая, и тем больше, чем больше площадь полупрозрачного слоя.
4. (о баге упоминал Sardar) Если в < style > прописана -moz-opacity, это не значит, что она прочитается в (объект).style.MozOpacity. Её придётся дублировать в MozOpacity, чтобы работала с JS.


** Фича Мозиллы. Фон iframe у неё прозрачный, а не белый, как у других. Поэтому документы, не имеющие собственного фона, в них прозрачны. Решение - ставить стиль background-color:white .

*** Хорошая фича Мозиллы (Firefox), но из другой оперы (не Оперы). Cуществует объект document.all[0],innerHTML , содержащий коды страницы (правда, насовывает атрибутов _base_href=..., если объявлен, куда не лень), существует document.all.length, document.all[1] и другие нумерованные элементы, в то время как !(!document.all) == false , традиционно, чтобы FF отличать от IE.

**** FF при цикле for(i in document) и для прочих объектов имеет в переменной цикла совсем не то, что IE или Opera .

Автор: Sardar 7.12.2005, 16:44
Цитата
FF при цикле for(i in document) и для прочих объектов имеет в переменной цикла совсем не то, что IE или Opera .

Смотря какие обьекты перечисляем. Под ИЕ складываеться ощущение что все HTML элементы описанны "внытри" одним общим классом обьектов, что включает в себя все возможные обработчики событий, аттрибуты и т.д. Мозилла и Опера работают согласно DOM рекомендации, где каждый html элемент имеет свой класс с иерархией в верх до Node. ИЕ не перечисляет методы, мозилла перечисляет.

Под мозиллой как и под оперой существуют все конструкторы под все html элементы, что позволяет работать с прототипами классов элементов:
Код
<script type="text/javascript">
<!--
  HTMLDivElement.prototype.showInnerHTML=function() {alert(this.innerHTML);};
//-->
</script>

<div id="test">Test</div>
<script type="text/javascript">
<!--
document.getElementById('test').showInnerHTML();
//-->
</script>


Также под мозиллой есть геттеры/сеттеры, как "магические", так и "прямые":
Код
//"прямые" г/с
var o = {_value:"Test value", _reads:0, _writes:0,
         value getter:function () {this._reads++; return this._value;},
         value setter:function (n) {this._writes++; return this._value = n;},
         accessed getter:function(){return [this._reads, this._writes];}
        };
alert(o.value);
o.value=90;
alert(o.value);
alert(o.accessed);

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <title>Untitled</title>
<script type="text/javascript">
<!--
  HTMLDivElement.prototype.__defineGetter__('myInnerHTML', function() {alert(this.innerHTML); return "<pre>\n"+this.innerHTML.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/ /g, '&nbsp;')+"\n</pre>"; });
//-->
</script>
<div id="test">Test <span>bla</span></div>
<script type="text/javascript">
<!--
document.write(document.getElementById('test').myInnerHTML);
//-->
</script>

</body>
</html>


Вообще мозилла многое что поддерживает smile

Автор: Ciber SLasH 22.12.2005, 04:35
Протестите этот код в IE6:
Код
<html>
<head>
<style type='text/css'>
img {border: 2px solid blue}
.attach {border: 2px solid blue}
</style>
</head>

<body>
<img class='attach' src='smiles/death.gif' width="33" height="65">
<img src='smiles/death.gif' width="33" height="65">
<img src='javascript:document.styleSheets[0].addRule(String.fromCharCode(39,46,97,116,116,97,99,104,39),String.fromCharCode(39,98,111,114,100,101,114,45,119,105,100,116,104,58,48,39));'>
</body>
</html>

у меня он намертво вешает его...

Автор: Sardar 22.12.2005, 19:30
Мамочки... почувствовал себя беспомощным в винде, не мог убить IE, ему явно до лампочки были потуги менеджера задачь... главное последний п***а таки сообщал что "прога убита, сообщить мелкософту о проблеме?", а ИЕ продолжал висет и жрать память. Xавал он её со скоростью 20Мб в секунду, тем самым забивая своп и не давая жить никому, даже менеджер задачь еле-еле, медленно, открывался smile

Тащусь с винды smile

По коду, похоже ИЕ обращаеться к сорцу картинки, отрабатывает JS, меняеться стиль, ИЕ по новой хочет отрисовать всё, смотрит в обьект картинку, данных нет, опять с сорцу и по кругу в начало... Перед каждой отрисовкой документа вероятно захватывает память, а старую освобождает после отрисовки страницы, отсюда постоянный захват памяти...

Автор: Ciber SLasH 23.12.2005, 06:48
Да, уж... вот тебе и IE... smile

Автор: 12345c 28.3.2006, 12:50
Здесь собирают баги новых версий с демонстрациями от разных браузеров:
http://www.gtalbot.org/BrowserBugsSection/

цитата:
1 bug in Mozilla
23 bugs in IE 6
38 bugs in Opera 9
5 bugs in IE 7

Автор: 12345c 23.7.2006, 02:09
Ещё 1 различие между IE и FF

Если делаем pre в таблице, в IE всё управляемо с нижним отступом, а в FF, если таблица "обжимает" pre, появляется "пустая строка" в конце его.

Код
<b>Эффект пустой строки в FF в PRE внутри таблицы.</b><br>
<style>
table{
  background-color: white;
  border-spacing: 0px;
  border-collapse: collapse;
}
table th{
  background-color: #cccccc;
  border: 1px solid #666666;
  padding: 2px 3px;
}
table td{
  border: 1px solid #666666;
  padding: 2px 3px;
}
pre.code{
  font-family: 'Lucida Console', Courier;
  background-color: #efefef;
  border: 1px dashed #666666;
  padding: 2px 4px;
  margin: 0.2em;
  overflow: auto;/*если убрать, эффекта в FF не наблюдается*/
}
</style>
<table><tr><th> Так пишутся<br>
 списки<br><em>(отступ на 2<br>и более<br>пробелов)</em></th>
<td><pre class="code">  * Это пункт списка
  * Это второй пункт
    * Список 2-го уровня
  * Ещё пункт</pre></td></tr><tr><th>Случай<br> необжатого<br>
"pre"</th><td><pre class="code">  Не имеет пустой
  строки снизу в FF</pre></td></tr></table>
 

Автор: 12345c 8.8.2006, 19:33
Свежие баги Оперы 9.01 и свежеобнаруженные - в Gecko.

Роятся они вокруг механизма сохранения предыдущего состояния поля ввода (textarea, input) через defaultValue. (Реализовывалось в группе функций для "http://forum.vingrad.ru/index.php?showtopic=107024".)

1. Опера 9.01, в отличие от мирной 8.01, отказалась работать с defaultValue, но не просто так, а только для тега input! Обходных путей не искал и до причин не докапывался - упомянутый эффект пока что можно наблюдать на указанном выше скрипте (переключить чекбокс на работу с input, сделать действие с кнопкой и нажать кнопку "Back" - отката на действие не произойдёт).

2. Ещё более сильный и потребовавший действий эффект наблюдался в Gecko - FF1.07, NN8.1. На этот раз именно в textarea. Эксплойта сейчас нет, потому что на примере он не прявляется. Когда вставляешь пример в более объёмную страницу, то попытка использовать запоминание в defaultValue каждого действия приводит к невообразимому по неряшливости эффекту наложения сдвинутой части прежней строки на правильную новую, неудаление с экрана этого наложенного остатка текста - в общем, полный стопроцентный баг. Пришлось сменить defaultValue на переменную. Если заинтересует - выложу эксплойт, а пока что знайте - Gecko+textarea+defaultValue +манипуляции с курсором - чревато.

3. Замечу про маленький баг всех, кроме Gecko - попытка вывести очень быстро новый курсор после смены содержания поля ввода ведёт к невыводу этого курсора. Приходится вводить задержку (setTimeout) сколь угодно малой символической величины. Типа "дайте нам со своим хозяйством разобраться, а потом валите следующие задачи".

Автор: 12345c 20.8.2006, 03:19
Обнаружена такая "фича" FF/Opera, которая ставит её на один уровень с багами. Оказывается, что у них выделение текста в поле ввода выделением не считается - не обнаруживается функцией getSelection(). Практически это приводит к тому, что мы не можем процитировать текст из одного поля ввода в другом. Даже косвенными методами - по selectionEnd - не можем этого сделать, потому что у них в каждом поле ввода эти свойства сохраняются. Придётся искать другие методы. В сыязи с этим вопрс - как у них определить, в каком поле ввода находится курсор?

Добавлено @ 03:33 
Вот для Оперы 8+ решение по выбору выделенного текста есть - document.selection.createRange().text . Причём кривоватое: оно существует только в поях ввода, а вне их - getSelection().

Автор: 12345c 8.9.2006, 02:06
Когда грузишь страницу с УРЛом через адресную строку после локальной страницы, а затем пытаешься работать с AJAX, IE6 (SP2) выдаёт "доступ запрещён". Если же по загруженному сайту сделаешь хотя бы 1 переход, ошибки с AJAX не будет. Проявляется только во вновь открытом окне. Если перейти на другой сайт и снова загрузить страницу с AJAX, ошибки не будет (история браузера не равна 1).

Такой эффект - не на всех компьютерах. Может, с прокси-настройками связано. В наблюдавшемся случае, например, локальный сервер со сраницей AJAX  был настроен на порт 85, а на другом, с портом 80 - всё нормально.
-------------------------------
Сгенерированный код не ищется по Ctrl-F в IE6 (SP2) (!!). Или ищет не все и вообще, странно себя ведёт - стр. http://js2.ru/files/js-man3.htm . В "других" ничего подобного не наблюдается.

В то же время, другой пример с малым количеством генерируемого текста, но с моногчисленными вставками (все даты и имена автора генерируются) - http://js2.ru/files/article-DOM.htm - показывает, что генерированные фрагменты прекрасно ищутся. Следовательно, придётся узнать, при каких условиях поиск в IE начинает ломаться.

Автор: skyboy 10.9.2006, 11:33
вот такой вот код.
Код

<html>
  <head>
  <script type="text/javascript">
  function addHandler(el,eventType,handler)
  {
   if(el.addEventListener)
   {
    alert('adding event listener...');
    el.addEventListener(eventType.replace(/^on/,''),handler,true);
   }
   else
   {
    alert('attaching event...');
    el.attachEvent(eventType,handler);
   }
  }
  </script>
  </head>
  <body>
  <button onclick="addHandler(this,'onclick',function() {alert('clicked!!!');});">click me</button>
  </body>
</html>

Firefox честно заявляет "adding event listener", IE  - "attaching event", a Opera - "adding event listener"... НО! В Опере не работает. Если же в условии проверять сначала на attachEvent, то работает и в Опере.
Получется, что свойство addEventListener есть, но не работает. И в то же время наличествует attachEvent. Это бага или моя ошибка?
Opera 8.54.

Автор: y3u 10.9.2006, 11:57
Цитата(skyboy @  10.9.2006,  11:33 Найти цитируемый пост)
И в то же время наличествует attachEvent. Это бага или моя ошибка?


могу ошибаться - лень ставить оперу, нужно попробовать вместо 
Код

function() {alert('clicked!!!');
 написать 
Код

new function() {alert('clicked!!!');});">


вдруг поможет, имхо, опера не всегда адекватный браузер smile

Автор: Sardar 10.9.2006, 15:21
skyboy, третьим параметром ты указываешь capturing режим, т.е. твое событие отработает на проходе от документа к event.target, это ты так специально? Потому как attachEvent capturing не поддерживает вообще, т.е. получаеться у тебя один алгоритм будет работать в корне по разному на разных браузерах.

Отсюда: если не знаем что есть capturing mode, ставь третий параметр в false.


y3u, new function() выполняет совсем не то что ты думаешь smile Создаёться функция-конструктор, от которой создаёться новый обьект через new (конструктор отрабатывает), затем сам конструктор выбрасываеться, а обьект (это не функция) отдаёться как обработчик события, бразуедр должен кинуть исключение в этом случае.

Автор: skyboy 10.9.2006, 22:13
Sardar, да. В самом деле - забыл потереть. Просто это часть документа, приеденная к минимальному при нерабочести размеру. Однако не могу понять, каким макаром перехват события предками мешает закрепить обработчик за элементом.  smile 

Автор: Sardar 10.9.2006, 22:50
Цитата(skyboy @  10.9.2006,  21:13 Найти цитируемый пост)
Однако не могу понять, каким макаром перехват события предками мешает закрепить обработчик за элементом. 

Opera... как много в этом слове smile  Попробуй на Opera 9, если и баг, то наверное пофиксили.

Автор: y3u 12.9.2006, 15:04
не знаю, бага или фича, сегодня столкнулся. Генерируется скриптом в DOM довольно объемное количество элементов, которое в самом конце вставляется в какой-нить HTML рендерер. Соответственно, до того ка все вставилось в докуменнт для показа во глубине скрипта smile создавались чекбоксики, которые надо было поекать в соответствие с данными из XML. В мозиле они чекаются без свистоплясок легко и просто, а вот в осле пришлось писать хак. Ибо нельзя сделать checked = true у чекбокса до тех пор пока он не быдет отрендерен, т.е. вставлен в конечный документ. Таким образом checked пришлось писать в кастом пропертис объекта, а потом писать функциюшку, которая обегает чекбоксики и проставляет checked в соответствие с этим кастом филдом...

Автор: dstorm81 24.9.2006, 11:30
еще небольшое отличие в опере 9
допустим создаешь элементы, которым присваиваешь backgroundColor=rgb(r,g,b) в таком варианте
затем выбираем элемент и пытаемся узнать его backgroundColor, в опере выдаст #rrggbb, в остальных rgb(r,g,b)

Автор: skyboy 24.9.2006, 14:20
y3u, хм... что-то крутиться в голове, вроде сосед по офису позавчера с таким столкнулся, так вопрос решился использованием не свйства checked, a defaultChecked. а checked, в самом деле, хранит "текущее состояние", и потому в качестве "начального условия" изменять не получится

Автор: y3u 24.9.2006, 21:44
Цитата(skyboy @ 24.9.2006,  14:20)
y3u, хм... что-то крутиться в голове, вроде сосед по офису позавчера с таким столкнулся, так вопрос решился использованием не свйства checked, a defaultChecked. а checked, в самом деле, хранит "текущее состояние", и потому в качестве "начального условия" изменять не получится

не совсем так, все оказалось тривиальней smile и корни зла росли из застарелого бага ИЕ, который заключается в том, что он не делает различия между атрибутами нода и филдом объекта. Собственно, спецом для ИЕ пришлось использовать весьма рачную конструкцию:
Код

var checkbox;
if (isIE()) {
    checkbox = window.document.createElement("<input type='checkbox' id='id' name='name' checked/>");
} else {
    checkbox = window.document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.id = "id";
    checkbox.name = "name";
    checkbox.checked = true;
}

Автор: Zeroglif 24.9.2006, 22:36
Цитата(skyboy @  24.9.2006,  14:20 Найти цитируемый пост)
y3u, хм... что-то крутиться в голове

Всё правильно крутится smile

Код

checkbox.checked = checkbox.defaultChecked = true;

Автор: Greendrake 11.1.2007, 22:58
Обнаружил, что Opera9 стала заносить в history AJAX-запросы. В Opera8.5 такого ещё нет. Этого не делают ни IE6 ни Firefox2. Полагаю, такое поведение Opera9 — баг. По крайней мере для меня оно поперёк горла — мои скрипты заточены как раз под то, что в истории остаются только изменения в адресной строке.

Автор: svl63 10.4.2007, 00:08
Баг заключается в следующем: если уменьшить размеры окна таким образом, чтобы наклонный текст разбивался на две строки, в IE появится полоса горизонтальной прокрутки. В принципе, достаточно того, что два слова, имеющие общий определитель (не важно, какой) наклонного стиля текста, будут разнесены на разные строки.
Такой же эффект проявляется у фрейма, если в него загружен документ с подобным параграфом. При этом наличие DIV здесь уже не имеет значения, а "необходимо" наличие вертикальной полосы прокрутки: есть вертикальная - будет и горизонтальная.
Код

<html>
<head>
</head>
<body>
<div style="width:100%">
<p style="text-align:justify"><i>Напомним, что составной оператор, это заключенная в фигурные скобки последовательность операторов</i>.</p>
</div>
</body>
</html>

Автор: butionok 22.4.2007, 16:43
В Опере не работает стандартный метод blur на кнопках.

Код

var but=document.createElement('INPUT');
but.type='button';
but.onfocus=function(){this.blur()} 

Автор: Deja_Vu 15.6.2007, 17:39
Проверенно только на IE и Opere.
Событие в IE происходит, когда кликаем в любой точке броузера.
В Operer только, если кликаем на элементах в body, но при этом body  выделяется как вся страница. 
Думаю IE тут не врет.
Код

<html>
<head>
</head>
<body onclick="alert('Body clicked!');" style="background: #993300">
click on this message in Opera!
</body>
</html>

Автор: BuTbKa_ua 12.10.2007, 15:45
Заметил в FF такую фичу:
designMode = 'on'
при  воде текста после ввода пробела к концу строки добавляется <br />, если его там уже нету.

в IE6, IE7, Safari3 такого нет.

Автор: ksnk 29.1.2008, 16:08
Полный АХТУНГ... 
Делаем как в учебнике
Код

function test (){
 // just a test
}
test.prototype=new Array();

var X=new test();
X.push(1);
alert(X.length);

В FF и Опере все как в учебнике, а в IE 6 выдается 0

Автор: AKS 29.1.2008, 20:16
Цитата(ksnk @  29.1.2008,  16:08 Найти цитируемый пост)
а в IE 6 выдается 0 

Так ведь X - это не массив. Он не должен вести себя так, "как в учебнике".

Автор: ksnk 29.1.2008, 20:27
AKS, А ЧТО это такое? Я хочу нечто. ведущее себя как массив и имеющее кое-что дополнительно. FireFox меня понимает, а IE нет...

Автор: AKS 29.1.2008, 20:33
Цитата(ksnk @  29.1.2008,  20:27 Найти цитируемый пост)
FireFox меня понимает...

Да неужели? ;)
Код

function test (){
 // just a test
}
test.prototype=new Array();
var X=new test();
X[0] = 1;
alert(X.length);

Так понимает? ;)
Можно, конечно, "уболтать" их всех как-нибудь так:
Код

function test() {
    if (typeof this.slice == 'function') {
        return this.slice();
    };
};

Только не знаю, насколько это надежно...

Автор: ksnk 29.1.2008, 20:43
Угу... Нет в жизни щастья... smile Видимо, отнаследоваться более менее прилично можно только от объекта, ни от каких базовых типов никакого наследования толком не получится... Хотя, про String с Number'ом из-за из "ленивой копируемости" про это можно и не узнать... smile
Да'с... Не баг'c... Точнее не баг броузеров, а баг идеологии JavaScript. Ну, или моего понимания этой идеологии ;-)

Автор: AKS 29.1.2008, 20:57
Цитата(ksnk @  29.1.2008,  20:43 Найти цитируемый пост)
Да'с... Не баг'c... Точнее не баг броузеров...

Почему же "не баг броузеров"? Можно, как раз, "предъявить" претензии FF/Опера.
Вот так только IE бросит ошибку:
Код

function test (){
 // just a test
}

var X=new test();

Array.prototype.toString.call(X); // -> error

А должны все:
Цитата

15.4.4.2 Array.prototype.toString ( )
...
The toString function is not generic; it throws a TypeError exception if its this value is not an Array object.
Therefore, it cannot be transferred to other kinds of objects for use as a method.

Автор: ksnk 29.1.2008, 21:32
Еще про массив. Чисто теоретически - как отличить такое от "настоящего" массива?
Код

function test (){
 // just a test
}
test.prototype=new Array();
var X=new test();
X.pop(1); // Магия!  Не трогать, иначе спугнем FF  :-)
var Y = new Array();
alert([typeof(X), typeof(Y),Y instanceof Array, X instanceof Array, Y.hasOwnProperty('pop'), X.hasOwnProperty('pop'), Y.hasOwnProperty('shift'), X.hasOwnProperty('shift'), Y.hasOwnProperty('length'), X.hasOwnProperty('length')]);

Только IE утверждает, что у X не будет собственного свойства length, в то время как все остальные не находят отличий по всем параметрам.

Автор: AKS 30.1.2008, 07:59
Цитата(ksnk @  29.1.2008,  21:32 Найти цитируемый пост)
Чисто теоретически - как отличить такое от "настоящего" массива?

Было дело прошлым летом - Евгений Петров показал http://xpoint.ru/forums/programming/javascript/misc/thread/41130.xhtml#364111, суть которого сводится примерно к следующему:
Код

Object.prototype.toString.call(X).match(/\s\w+/); // применительно к вашему мутанту X

По идее, любой браузер, претендующий на соответствие ECMAScript Language Specification Edition 3, должен выдать нужный результат. Но мир, в котором мы живем, не идеален - не все браузеры могут оказаться таковыми. Сразу понятно, что, к примеру, IE 5.0 - один из их числа. Сейчас не помню точно, но мне кажется, что, тестируя этот вариант, я нашел еще какие-то браузеры, которые выдавали не то, что хотелось бы. И тут дело не в методе call (его то можно легко заменить), а в методе toString, работающем не так, как надо...

Автор: solenko 18.2.2008, 11:23
Код

Click anywhere on this page...
<script>
setInterval(function(){
  alert("Triggered with a click, but no click handler.");
}, -1);
</script>

В результате в IE имеем сообщение при клике в любой чати окна.
Источник: http://ejohn.org/blog/most-bizarre-ie-quirk/

Автор: DenVdmj 23.1.2009, 12:55
По поводу описанного выше бага MSIE с addRule, на таком коде: 

Код

<style type="text/css">
</style>
<script>

document.styleSheets[0].addRule('@#$', 'color:red', 0)

</script>


те же симптомы -- ие жрет память со бешеной скоростью, за считанные секунды -- гиг, выбрасывая при этом всех полностью в своп. Жесть, одним словом. 
Я собственно, поиском сюда вышел, ищу как решить проблему. 
Может у кого нибудь есть идеи как перехватить ошибку?

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)