[xShift]

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

Решил написать свой микрофреймворк и столкнулся с небольшой проблемой при создании одного из модулей для вращения какого-либо контента.

Вот код модуля:

// 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].style.zIndex++;
            $.callback(c, e[ind]);
            if(ind++ >= e.length - 1) {
                for(var i in e) e[i].style.zIndex = 0;
                ind = 0;
            };
    }, t); 
},
htmlObj: function(e) {
    return this.isO(e) ? e : this.get(e);
},

Вот пример вращаемого конетнта:

<div id="presentation">
        <p>lorem.</p>
        <p>ipsum.</p>
        <p>dolor.</p>
    </div>

А вот стили отображения:

    /* 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;
}

Что происходит в Internet Explorer и Edge браузерах:
после первого срабатывания и корректного изменения zIndex у свойств HTML-элементов, при повторных итерациях, браузер как бы не обращает внимания на обхъекты и zIndex перестает меняться вообще .

В Opera, Firefox, Android browser, Chrome и Safari все работает великолепно! Помогите мне пожалуйста устранить эту ошибку в браузере IE и Edge. Хотя бы в Edge так как писать я буду еще долго, а осел к тому времени, я надеюсь, сдохнет окончательно.