Сломался полноэкранный режим на сайте (fullscreen) при обновлении Chrome 71 / Firefox etc. + решение

заметить можно в фотоальбомах

#1 23 декабря 2018 в 03:04
В новой версии Chrome версии 71 команда Chromium поменяла логику работы функции javaScript "requestFullscreen", из-за чего перестала работать кнопка на фотографиях "Открыть в полноэкранном режиме" в компоненте Фотоальбом. Подробности по изменениям можно найти здесь — developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen .

В текущий момент пострадали абсолютно все сайты, работающие на платформе InstantCMS, но реально это заметят только те, кто в работе использует полноэкранный режим (например, в фотоальбомах). Там при попытке открыть полноэкранный режим вылезает следующая ошибка:

Uncaught (in promise) TypeError: Failed to execute 'requestFullscreen' on 'Element': parameter 1 ('options') is not an object.
at Object.request (screenfull.js?1525189823:7)
at Object.toggle (screenfull.js?1525189823:7)
at HTMLDivElement.<anonymous> (photos.js?1525189823:87)
at HTMLDocument.dispatch (jquery.js?1525189823:3)
at HTMLDocument.r.handle (jquery.js?1525189823:3)

В InstantCMS за fullscreen отвечает либа "screenfull.js", она находится по адресу "\templates\default\js\screenfull.js".
Разработчик этой либы несколько дней назад выкатил новую версию, её можно забрать здесь — github.com/sindresorhus/screenfull.js (там по ссылке найдите файл версии 4.0.0, или выше, он работает, надо просто заменить этим файлом старую либу) .

На своем проекте я либу уже обновил, у меня полноэкранный режим заработал и работает штатно.

Если кому это необходимо — велкам 😊.
#2 23 декабря 2018 в 03:06
Само собой, отдельно написал Fuze'у об этом, искренне верю в то, что в новом релизе эту либу обновят, но если кому критично — вариант выше работает 😊.
#3 1 мая 2019 в 22:51
Не помогает. Вот так теперь пишет в гугло и яндекс браузерах.

TypeError: Failed to execute 'requestFullscreen' on 'Element': parameter 1 ('options') is not an object.
at Object.request (all.js?1532793765:458)
at Object.toggle (all.js?1532793765:458)
at HTMLDivElement.<anonymous> (photos.js?1532793765:87)
at HTMLDocument.dispatch (jquery.js?1532793765:3)
at HTMLDocument.r.handle (jquery.js?1532793765:3)
request @ all.js?1532793765:458
toggle @ all.js?1532793765:458
(anonymous) @ photos.js?1532793765:87
dispatch @ jquery.js?1532793765:3
r.handle @ jquery.js?1532793765:3

В остальных фото в полный экран работают.
#4 2 мая 2019 в 00:46
Полноэкранный режим давно не работает. Уже как то писал про это.
Более того авторизованные пользователи при клике на полноэкранный просмотр еще могут видеть изображения в размере Оригинала, а вот гости видят только в размере 640х480
Установил чистый Инстант, загрузил фото и попробовал открыть полноэкранный режим в 5-ти браузерах.
В IE полноэкранный режим не работает вообще, в остальных по описанному выше алгоритму.
#5 2 мая 2019 в 01:17
У меня полноэкранный режим совсем не открывается ни у кого и никак. Именно с googl и яндекс браузеров.
Не знаю как давно, но с месяц точно.
#6 2 мая 2019 в 03:49

В InstantCMS за fullscreen отвечает либа "screenfull.js", она находится по адресу "\templates\default\js\screenfull.js".
Разработчик этой либы несколько дней назад выкатил новую версию, её можно забрать здесь — github.com/sindresorhus/screenfull.js (там по ссылке найдите файл версии 4.0.0, или выше, он работает, надо просто заменить этим файлом старую либу

rubesslov
это рабочее решение. После замены screenfull.js полноэкранный режим просмотра фоток заработал у меня во всех браузерах, включая новейшие версии Файрфокс и Едж. Все, что на движке хрома (яндекс, опера и т.п.), тоже работают правильно. Мобильные версии тоже. Единственный, кто отказался показывать в полный экран — Internet Explorer, у меня он v.11.
#7 2 мая 2019 в 12:30

После замены screenfull.js полноэкранный режим просмотра фоток заработал

@Honko
Не работает, что не так делаю?
1. Скачал архив и достал из папки dist файлик screenfull.js.
2. Закачал на сайт с заменой существующего.
3. Открываю фото на сайте, по кнопке "На весь экран" фото на весь экран не растягивается.
#9 2 мая 2019 в 17:01

Не работает, что не так делаю?

vikont
кеш браузера чистили? В админке (настройки — интерфейс — абстрактный счетчик) циферку увеличили? К сожалению, я не программист от слова ни разу и поэтому не могу сказать, почему у меня заработало (это произошло сразу, как прочитал про замену либы, еще в прошлом году), а у Вас нет. Спрашивал юзеров — у них тоже фотки на полный экран открываются.
Щас вспомнил, что вроде бы даже и файл этот не скачивал: открыл как текст github.com/sindresorhus/screenfull.js/blob/gh-pages/dist/screenfull.js и заменил содержие в том, что был на сайте. Версия там сейчас более новая, что у меня (у меня 4.0, а там уже 4.20).
#10 2 мая 2019 в 17:08
На VPS-ке додумался кэширование отключить. В гугл браузере теперь заработало. В яндексе еще пока нет. laugh
Сейчас еще попробую где нибудь что нибудь почистить )
#11 2 мая 2019 в 17:43

кеш браузера чистили?

@Honko
Конечно! Чистил все что мог.
#12 2 мая 2019 в 17:52
у меня в \templates\default\js\ лежит файл screenfull.js вот такого содержания:

  1.  
  2. /*!
  3. * screenfull
  4. * v4.0.0 - 2018-12-15
  5. * (c) Sindre Sorhus; MIT License
  6. */
  7.  
  8. !function(){"use strict";var u="undefined"!=typeof window&&void 0!==window.document?window.document:{},e="undefined"!=typeof module&&module.exports,t="undefined"!=typeof Element&&"ALLOW_KEYBOARD_INPUT"in Element,c=function(){for(var e,n=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],r=0,l=n.length,t={};r<l;r++)if((e=n[r])&&e[1]in u){for(r=0;r<e.length;r++)t[n[0][r]]=e[r];return t}return!1}(),l={change:c.fullscreenchange,error:c.fullscreenerror},n={request:function(l){return new Promise(function(e){var n=c.requestFullscreen,r=function(){this.off("change",r),e()}.bind(this);l=l||u.documentElement,/ Version\/5\.1(?:\.\d+)? Safari\//.test(navigator.userAgent)?l[n]():l[n](t?Element.ALLOW_KEYBOARD_INPUT:{}),this.on("change",r)}.bind(this))},exit:function(){return new Promise(function(e){var n=function(){this.off("change",n),e()}.bind(this);u[c.exitFullscreen](),this.on("change",n)}.bind(this))},toggle:function(e){return this.isFullscreen?this.exit():this.request(e)},onchange:function(e){this.on("change",e)},onerror:function(e){this.on("error",e)},on:function(e,n){var r=l[e];r&&u.addEventListener(r,n,!1)},off:function(e,n){var r=l[e];r&&u.removeEventListener(r,n,!1)},raw:c};c?(Object.defineProperties(n,{isFullscreen:{get:function(){return Boolean(u[c.fullscreenElement])}},element:{enumerable:!0,get:function(){return u[c.fullscreenElement]}},enabled:{enumerable:!0,get:function(){return Boolean(u[c.fullscreenEnabled])}}}),e?module.exports=n:window.screenfull=n):e?module.exports=!1:window.screenfull=!1}();
  9.  
рядом с ним лежит старый с припиской "не работает", значит, этот как раз тот, который работает hoho
#13 2 мая 2019 в 18:01
час назад на github появились новые изменения в ближайшем релизе icms, в том числе "screenfull обновлён до актуальной версии". iсms2
а сам этот файл (его новая версия, которая будет в следующем релизе icms) находится вот тут
#14 2 мая 2019 в 18:11
Спасибо за наводку в git. Я там вообще тяжело ориентируюсь. )

Теперь везде все работает.
#15 2 мая 2019 в 19:32
А у меня фотки так и не растягиваются!
Что за напасть… Где еще копать?
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.