Тормозной FF или только у меня
 

Ветка не совсем правильная, но зато тут всё по ФФ. У меня был плеер картинок на канвасе, который менял картинки через каноничный crossfade, то есть одна растворяется в цвете фона, вторая на ее месте проявляется как в гидрохиноне. Работало все нормально, но все равно как-то не гладко на больших картинках. Я думал виноват канвас.

Канвасный плеер я переделал под шоурум, а плеер сделал на обычных двух слоях из конкретно двух IMG один над другим в абсолютных координатах. Завел там этот crossfade и ужаснулся. ФФ конкретно, блин, тормозил. Вместе быстрого и плавного перехода какие-то конвульсии, типа как кино на скорости 16 кадров. Проверил скрипт на три раза - там капец как все просто, элементарно. Считай пустой.

Изучая поведение ФФ заметил что качество эффекта меняется не от размеров картинок в слоях, а от размеров окна! Если окно уменьшить, а если уменьшить еще - все становится как доктор прописал.

Структура хтмля такая

<div> <-- Контейнер, он же оверлей -->
  <div> <!-- полоска под имя картинки и несколько слов -->
  <img> <!-- верхний слой -->
  <img> <!-- нижний слой -->
<div>

то есть крайне, примитивно простая. Оверлей занимает не всю страницу, а весь экран. То есть его можно прокрутить и увидеть что не было закрыто, щелкнуть тумбу, оверлей (еще их называют модальными окнами) перебежит на новое место со всем своим скудным контентом.

Но вот что главное. Я из любопытства или даже злорадства проверил тот же скрипт в Хроме - ну типа там-то апще здохнуть должно - и внезапно оказалось что в Хроме все летает как из пушки несмотря на размеры картинок. Кстати они небольшие, 900 на 1000 или в среднем такие.

Вопрос такой. Может кто сталкивался и знает почему ФФ тормозит когда одной картинке opacity меняется от 0 до 1 по 0.2 5 раз, а другой наоборот.

Кстати, в fullscreen режиме ФФ невзирая показывает контент страницы, а Хром показывает только тот элемент, который зафулскринен.

Код?

Код

'crossfade':function(img) {
			
				this.title.innerHTML=img.dataset.title;
				this.image2.style.opacity=1;
				this.image.style.opacity=0;
				this.image.src = img.src;
	
				this.interval=window.setInterval((function(){
				
					var opacity = this.image.style.opacity*100;

					opacity+=20;
					
					if(opacity >= 100) {
						window.clearInterval(this.interval);
						this.interval=null;
						this.image.style.opacity=1;
						this.image2.style.opacity=0;
					}
					else {
						this.image.style.opacity=opacity/100;
						this.image2.style.opacity=1-(opacity/100);
					}
					
				}).bind(this),10);
			
			}

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

Я убирал с оверлея альфу, то есть вместо rgba писал решетку - думал что может его альфа затрудняет - не помогло.

Есть сайт куда я выложил и прицепил рабочий скрипт, сайт коммерческий. Могу дать ссылку.

Нет. Сделай полноценную страничку пример, чтоб мы могли кликнуть по ссылке и посмотреть в живую на твои проблемы.