Почему сафари игнорирует этот код?

Question

[historydev]

Добрый вечер. Скажите пожалуйста почему сафари тупо пропускает этот код, из-за этого у меня на выходе кривой .pdf

Тест: https://marketingjobs.ru/testirovanie

Спасибо, вся функция ниже будет

document.querySelector('.results').style.transform = 'scale(1,1)'
				document.querySelector('.value').style.transform = 'scale(1,1)'
				document.querySelector('.name').style.transform = 'scale(1,1)'
				document.querySelector('.counts').style.transform = 'scale(1,1)'
				document.querySelector('.results').style.margin = '0px'
				document.querySelector('.value').style.width = '40%'
				document.querySelector('.counts').style.width = '40%'
				document.querySelector('.counts').style.marginLeft = '30%'

window.html2canvas = html2canvas
		
		if(window.innerWidth <= 480) {

			function genPDF() {

				document.querySelector('.results').style.transform = 'scale(1,1)'
				document.querySelector('.value').style.transform = 'scale(1,1)'
				document.querySelector('.name').style.transform = 'scale(1,1)'
				document.querySelector('.counts').style.transform = 'scale(1,1)'
				document.querySelector('.results').style.margin = '0px'
				document.querySelector('.value').style.width = '40%'
				document.querySelector('.counts').style.width = '40%'
				document.querySelector('.counts').style.marginLeft = '30%'

				html2canvas(document.querySelector('body'), {
					onrendered: function(canvas) {

						var img = canvas.toDataURL("image/png")
						var doc = new jsPDF()
						doc.addImage(img, 'JPEG', 70, 0, document.body.style.width-150,document.body.style.height-150)
						doc.save('test.pdf')

					}
			    })
			}

		}

		else {

			function genPDF() {
				html2canvas(document.querySelector('body'), {
					onrendered: function(canvas) {

						var img = canvas.toDataURL("image/png")
						var doc = new jsPDF()
						doc.addImage(img, 'JPEG', 0, 0, document.body.style.width-150,document.body.style.height-150)
						doc.save('test.pdf')

					}
			    })
			}

		}

Comments

[Rustam Bainazarov]

document.querySelector('.counts').style.transform = '40%'

Что такое transform: 40%? Такого значения у этого свойства быть не может. Нужно определить тип трансформации с нужным значением.

[RAX7]

document.querySelector('.counts').style.transform = '40%'

это что за покемон?

[historydev]

Рустам Байназаров, согласен, поправил, результат не изменился, я думаю эта опечатка дала бы идентичный резалт и на андроиде, но там всё как часики, спасибо

document.querySelector('.results').style.transform = 'scale(1,1)'
				document.querySelector('.value').style.transform = 'scale(1,1)'
				document.querySelector('.name').style.transform = 'scale(1,1)'
				document.querySelector('.counts').style.transform = 'scale(1,1)'
				document.querySelector('.results').style.margin = '0px'
				document.querySelector('.value').style.width = '40%'
				document.querySelector('.counts').style.width = '40%'
				document.querySelector('.counts').style.marginLeft = '30%'

[historydev]

RAX7, да-да, поправил, но результата нет, спасибо, я думаю оно бы и на андроид сказалось, но нет

[RAX7]

Владимир, попробуй так:

function genPDF() {
  document.querySelector('.results').style.transform = 'scale(1,1)'
  document.querySelector('.value').style.transform = 'scale(1,1)'
  document.querySelector('.name').style.transform = 'scale(1,1)'
  document.querySelector('.counts').style.transform = 'scale(1,1)'
  document.querySelector('.results').style.margin = '0px'
  document.querySelector('.value').style.width = '40%'
  document.querySelector('.counts').style.width = '40%'
  document.querySelector('.counts').style.marginLeft = '30%'
  
  setTimeout(() => {
    html2canvas(document.querySelector('body'), {
      onrendered: function(canvas) {
        var img = canvas.toDataURL("image/png")
        var doc = new jsPDF()
        doc.addImage(img, 'JPEG', 70, 0, document.body.style.width-150,document.body.style.height-150)
        doc.save('test.pdf')
      }
    })
  }, 0);
}

[historydev]

RAX7, извините пожалуйста, тестили в куче других иос браузерах, нет результата

[historydev]

RAX7, увеличил таймаут на 150мс, тоже не помогло

[historydev]

RAX7, вы владеете яблочным девайсом? Я могу скинуть ссылку на тест, я просто не уверен что дело в работе кода, возможно человек тормозит, хотелось бы убедиться...

[RAX7]

Владимир, у меня нет яблофона, но думаю что у Рустам Байназаров он есть )

[historydev]

Рустам Байназаров, у вас есть яблофон?

[historydev]

RAX7, да мало того что берут этот кусок закрытого калла, который сливает твою инфу, так ещё и не умеет им пользоваться! Я задаю вопрос мол, файловый менеджер есть? - я не знаю. Аххаха, анекдот какой-то)

[historydev]

RAX7, на айпаде таже ситуация к слову, поэтому и решил что проблема в сафари

[RAX7]

Владимир, добавь лучше ссылку в вопрос, может кто мимо проходить будет поможет.

[historydev]

RAX7, добавил

Answer 1

[twolegs]

Рекомендую почитать про области видимости и всплытие переменных в js.
Блоки if-else не ограничивают область видимости, соотвественно, второе определение фукнции внутри else всегда перекрывает первое. То есть какой бы ни был результат сравнения внутри if всегда будет выполняться второй вариант функции.
Определите функцию один раз и перенесите условие внутрь функции. Все должно заработать.

Comments

[historydev]

Я этого не знал, спасибо! Обязательно почитаю.