Ошибки в IE при работе с style.display и странное HTML Object

[xShift]

Здравствуйте!

 

Решил недавно написать свой framework на подобие jQuery с возможностью удобной выборки селекторов и последующей с ними работы. Все прекрасно получилось и замечательно работает за исключением пары глючных модулей для вкладок и ротации контента.

 

Собственно, проблема заключается в хитроподобном баге Internet Explorer, который до сих пор(тестил в последней версии IE Edge) проглатывания первого элемента массива с указателями на HTML Object'ы документа при попытке переключения z-index элементов прокрутки.

 

Код:

	// Micro module rotate some contents 	// [element] :: ( #parents fixed container -> .slide selector )	rotate: function(e,c,t) {		var e = this.htmlObj(e);		var t = t || 3000;		var ind = 0;		setInterval(function() {				e[ind].rotate = true;				e[ind].style.zIndex++;				$.callback(c, e[ind]);				if(ind++ >= e.length - 1) {					for(var i in e) e[i].style.zIndex = 0;					ind = 0;				};		}, t); 	},

К счастью, все написано в нативном компактном виде и никаких лишних багов быть не может, но при прокрутке элементов первый HTML Object проскакивает цикл как надо, а затем странным образом сглатывается эксплорером и прокрутка прекращается. Во всех остальных браузерах код ведет себя замечательно.

	// rotations api	$.rotate('#presentation p', function(){		//$.log(this);	}, 1500);

Вот кусок верстки с самими элементами HTML:

		<div id="presentation">			<p>Evolution JS — это не просто фреймворк и удобное API для скоростной разработки клиентских приложений, но и целый набор вспомогательных модулей с неограниченным потенциалом для творчества.</p>			<p>На данный момент внутренний движек и все фильтро-математические функции уже готовы для того, чтобы комфортно писать на JavaScript и не задумываться о сложных вещах, а также самостоятельно разрабатывать ядро Evolution.</p>		</div>

И сам код CSS для эллеметов:

/* rotation */#presentation {	border-radius: 8px;	position: relative;	margin: 20px 0;	padding: 12px;	height: 90px;	width:95%;}#mainContents #presentation p {	box-shadow: 0 0 5px #999;	background: #FFFFFF;	position: absolute;	border-radius:8px;	padding: 10px;	top: 0px;}

Кроме прокрутки я также столкнулся с подобным багом IE при создании микромодуля вкладок, который был обнаружен случайно при тестировании поделки:

	// Micro tabs module	// p - control selectors   ( like  [ul > li] )	// e - switchable contents ( like [div] )	// first .class "active"	// transform control [id] to switchable [class] 	tabs: function(p,e,c) {		var e = this.htmlObj(e);		var p = this.htmlObj(p);		p[0].classList.add('active');		// cleans the active marker		var tabActions  = function(s,r) {			var s = s || 0;			for(var t in r) {				if( t != s ) {					p[t].tabs = true;					r[t].tabs = true;					p[t].classList.remove("active");					r[t].style.position = 'absolute';					r[t].style.left = '-9999px';				}			}		}; tabActions(null,e);		$.click(p, function(t){			var cur = $.dom('.'+ t.id)[0];			cur.tabs = true;			cur.style.position = '';			$.toggleClass(t,"active");			var p = $.stripNum(t.id) - 1;			tabActions(p,e);			$.callback(c, cur);		});	},

В тщетных попытках заставить IE корректно комплитить действия с display:none HTML Object я напоролся на вилы. Элемент согласно детализации в консоли браузера выходит из состояния display:none в display: block или display: inline-block, о чем свидетельствует расконсоливание объект.style.display, но эти в наглядной версии элемент продолжает оставаться скрытым и нив какую не возвращается на самом деле. То есть консоль говорит, что изменения произошли, но ничего не изменилось на самом деле.

 

Помимо этого, проблема актуальна только для первого элемента стека. При кликах на последние элементы - все корректно обрабатывается и исчезает, но появляться обратно не хочет.

 

Собственно, из-за ошибок с style.display.none было решено использовать позиционирование элементов в абсолютном смысле для скрытия не совсем здоровым костылем, но и при этом браузер отказался корректно отрабатывать клики по вкладкам:

				if( t != s ) {					p[t].tabs = true;					r[t].tabs = true;					p[t].classList.remove("active");					r[t].style.position = 'absolute';					r[t].style.left = '-9999px';				}

Сам стиль вкладок таков:

/* tabs */#tabs,#tabs-2 {	text-align: center;	list-style: none;	margin:15px 0;}#tabs-2 ul,#tabs ul {	font-family: Verdana;	display: block;	width: auto;	padding: 0;	margin: 0;}#tabs-2 li.tab,#tabs li.tab {	border-top: 2px double #4A7BD2;	border-radius: 10px 10px 0 0;	display: inline-block;	border:1px solid #999;	margin: 0 0 -1px 0;	padding: 7px 15px;	background: #999;	color: #FDFFFA;}#tabs-2 li.active,#tabs li.active {	box-shadow: 0px 0px 5px rgb(148, 148, 148);	border-top: 3px double #FFF340;	color: #FFF340;	}#tabs-2 div,#tabs div {	border: 2px solid #999;	background: #F4F4F4;	border-radius: 4px;	text-align:left;	}

А их код следующий:

<div id="tabs-2"><ul>	<li id="tbs-1" class="tab">API</li>	<li id="tbs-2" class="tab">CSS</li></ul><div class="tbs-1"><code><pre>//tabs engine$.tabs('#tabs-2 li', '#tabs-2 div', function() {	$.log(this);});</pre></code></div><div class="tbs-2"><code><pre>/* tabs */#tabs,#tabs-2 {	text-align: center;	list-style: none;	margin:15px 0;}</pre></code></div></div>

Для запуска использовано API:

	//tabs engine	$.tabs('#tabs-2 li', '#tabs-2 div', function() {		//$.log(this);	});

Сам фреймворк со всеми используемыми функциями прикладываю во вложении. Помогите пожалуйста побороть ошибки IE и сделать Evo полностью кроссбраузерным. Очень хочется вывести игрушку из beta версии в stable и выложить в internet.

 

Может быть кто-то сможет написать очень компактный аналог или что-то заменить в коде чтобы это стало рабочим в Internet Exploer?

 

скачать примеры: FE framework EVO v.1.2 beta source + API

[Great Rash]

Короче, в чём заключается баг ИЕ? Зачем километры кода? Соберите конкретный пример бага без использования вашего фреймворка.

[xShift]

Короче, в чём заключается баг ИЕ? Зачем километры кода? Соберите конкретный пример бага без использования вашего фреймворка.

 

Начал писать выборку по селекторам, как у sizzle - так и увлекся.

 

Суть:

 

Есть HTML Object с ID=test. Если его свойство display сделать none, то применить к нему каких либо изменений в состоянии none не получается, хотя изменения состояния фиксируются в console.log. Если объект скрыть однажды, то вернуть его с помощью display = block почему то не получается.

 

Есть ли какое-то решение для этого?

 

update:

 

Простите, нашел глупый косяк со свойством length. Оно пролазило в HTML Objects коллекцию после получения по тегам. Ошибку сразу увидел во всех браузерах на Windows, но она почему-то совершенно не появлялась, когда использовал свой движек для выборки селекторов и совсем не появлялась в Safari когда писал код:

		var e = document.getElementsByTagName('p');		var t = 3000;		var ind = 0;		setInterval(function() {				e[ind].style.zIndex++;				if(ind++ >= e.length - 1) {					for(var i in e) {						if( i <  e.length ) {							// через раз в массив пролазит свойство length, которое не является HTML Object							e[i].style.zIndex = 0;												}					}					ind = 0;				};		}, t); 

Edited October 29, 2015 by xShift