Почему отображение элемента через JS некорректно работает в Safari на IOS?
 

Добрый день!

solved

A750,
на всякий случай лучше изменять свойство style.display, а не все свойства сразу style.cssText .
https://learn.javascript.ru/styles-and-classes

Спасибо, ознакомился!
Я пробовал добавить новый класс с прописанными в css параметрами для него.
Но тогда отображение перестаёт работать даже в браузере на компьютере ...

A750,
может макет полностью?

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

solved

A750,
можно только гадать что делает ваш код ... неплохо бы добавить проверку на существование элемента прежде чем менять стиль, типа так

if (arropen[1] != `${attr}`) {
         let elem = document.getElementById(`${arropen[1]}`);
         if(elem)  elem.style.display = 'block';
      }

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

Понял
Буду улучшать
Это мой первый в жизни код

A750,

let guessitem = document.getElementById(`${a}`);
if(!guessitem) return;

Прописал
На комп по-прежнему работает
В Сафари по-прежнему не хочет)

Первый в жизни код выглядит примерно так

alert('Привет мир')

А ты уже куролесишь по взрослому! :nono:

=))))

Да, в начале скрипта это было прописано, даже и осталось там)

Какая версия сафари?
У вас a - случайное число от 1000 до 1019. Но не видно элементов с такими id

На том, что под рукой - 14.8.1
На более свежем - сейчас не знаю, но там то же самое

Элементы с таким id, конечно же есть)
Их видно в html
Ну и на компьютере всё работает...

Все равно, какая то странная обработка кликов.
Когда будет клик по guessitem сработает сначала обработчик, повешанный на него, а потом снова сработает обработчик клика, повешанный на window. На guessitem повесится новый обработчик, и следующий раз при клике на нем сработают оба.

До этого я ещё не дошёл, посмотрю...
Пока всё выглядит корректно и работает. Но только на компьютере)

Дело, похоже, вообще не в js
Я сделал по-умолчанию всегда видимыми эти объекты - на телефоне они всё-равно не отображаются

Я вообще не понимаю, как это у вас работает
Возьмем строки 17- 23. Когда первый раз выполняется. Допустим клик по элементу с id "1"

let attr = itemimg.getAttribute('id'); // "1"
arropen.unshift(`${attr}`); // ["1"]
if (arropen[1] != `${attr}`) { arropen[1] === undefined условие выполняется
document.getElementById(`${arropen[1]}`).style.cssText = 'display: block;'; // getElementById("undefined") вернет null и будет ошибка

(Если attr строка, то зачем писать `${attr}`, когда можно просто attr?)

И, кстати, ошибка в css. Строка 46
nbox-shadow: 3px 3px 3px red;

Спасибо за внимание к коду, но прошу прощения за время, которое вы потратили на css - это не ошибка - это пометка, данная строка закомментирована)
В процессе поиска причины, я комменчу много строк и ставлю пометки.


Возвращаясь к сабжу:
Выяснил опытным путём, что дело совершенно не JS.
Элемент, который я хочу отобразить, на самом деле пустой - там есть только фон, созданный через css. Так вот пустой элемент только с фоном мобильное устройство не отображает!!! Как так-то?...:blink:

А так можно было !!!? (обычно в css комментируют /* */)Непонятно только, как это работает в винде.
В консоле нет ошибок?

Я в scss пишу)

Есть, конечно
Те, о которых вы говорите
Но на работу не влияют - с каждым нажатием запускается новый цикл - и там ошибки уже нет, тк массив вынесен за пределы функции, и его содержимое сохраняется

В общем, это фэйспалм.
Тег <img> без содержимого, только с одним фоном, установленным в css, мобильный браузер не отображает.
Заменил его на div - всё заработало. Десять часов искал...