Safari canvas не работает

[Safari / Chrome fatal Bug] HTML5 canvas не работает для конкретного случая, но Firefox работает хорошо

Я использую html5 canvas для создания программного обеспечения для графов функций. Есть критическая ошибка, но я не знаю, что происходит.

То есть когда я звоню:

Все хорошо работает в Firefox 26 / Chrome 32 / Safari на Mac.

Однако, когда я изменяю только один крошечный параметр, например:

график просто исчезает в Chrome / Safari , но все же хорошо работает в Firefox .

Весь код приведен ниже, подскажите, пожалуйста, как его решить? Большое спасибо. Как эта ошибка может случиться с основными браузерами !? независимо от кода это так просто.

2 ответа

Кажется, вы нашли разницу в том, как браузеры обрабатывают бесконечность (или, возможно, огромные значения) при рисовании.

Во-первых, давайте отметим, что, имея от -5 до 5, вы разрешаете точное значение x = 0, что приводит к 1/sin(0) , то есть Infinity (или с некоторыми ошибками округления с плавающей запятой, может быть чрезвычайно положительным или отрицательное значение).

FireFox, очевидно, игнорирует это. Возможно, он игнорирует точку, но продолжает обводить остальную часть строки, как если бы ее там не было, или, возможно, он оставляет ее как разрыв в строке (что я считаю правильным, интуитивным поведением для NaN).

Но в Chrome и Safari это бесконечность или огромное число приводит к тому, что весь ход становится недействительным, поэтому он не рисует ничего из этого.

Простое решение — убедиться, что ваша ценность вменяема. Вот проверка, которая ограничивает границы: (вы можете использовать более широкие границы или по-другому обрабатывать выход за пределы экрана)

Я подтвердил, что это устраняет проблему, которую вы видите в Chrome. Я предполагаю, что это относится и к Safari.

Основываясь на идее Дейва, я наконец-то отредактировал свой код следующим образом:

Источник

[Safari/Chrome fatal Bug]HTML5 canvas не работает для конкретного случая, но Firefox работает хорошо

Я использую html5 canvas для создания программного обеспечения с графом функций. Есть критическая ошибка, но я не знаю, что происходит.

То есть когда я звоню:

все хорошо работает в Firefox26/Chrome32/Safari7 на Mac.

Однако, когда я изменяю только один крошечный параметр, такой как:

график просто исчезает в Chrome/Safari, но все еще хорошо работает в Firefox.

Весь код приведен ниже, подскажите, пожалуйста, как его решить? Большое спасибо. Как эта ошибка может случиться с основными браузерами!? независимо от кода это так просто.

2 ответа

Похоже, вы нашли разницу в том, как браузеры обрабатывают бесконечность (или, возможно, огромные значения) при рисовании.

Во-первых, отметим, что, имея от -5 до 5, вы допускаете точное значение x=0, что приводит к 1/sin(0) который Infinity (или с некоторыми ошибками округления с плавающей точкой, может быть очень положительным или отрицательным значением).

FireFox, очевидно, игнорирует это. Возможно, он игнорирует точку, но продолжает обводить остальную часть строки, как если бы ее там не было, или, возможно, он оставляет ее как разрыв в строке (что я считаю правильным, интуитивным поведением для NaN).

Но в Chrome и Safari это бесконечность или огромное число приводит к тому, что весь ход становится недействительным, поэтому он не рисует ничего из этого.

Простое решение — убедиться, что ваша ценность вменяема. Вот проверка, которая ограничивает границы: (вы можете использовать более широкие границы или по-другому обрабатывать выход за пределы экрана)

Я подтвердил, что это устраняет проблему, которую вы видите в Chrome. Я предполагаю, что это относится и к Safari.

Источник

HTML5 Canvas DrawImage Safari 12.0 bug (tested on iOS 12.1/Mac OS Mojave)

Found this bug recently while dealing with CanvasRenderingContext2D.drawImage() method of the Canvas 2D API

The sx and sy parameters which are supposed to be the x-axis and y-axis coordinates of the top-left corner of the sub-rectangle of the source image, to draw into the destination context. (source: Mozilla) work differently on Safari browsers when provided with a value less than 0 (negative values).

Negative values for sx and sy on other browsers (tested Chrome and Microsoft Edge) work as expected, by re-positioning the mentioned top-left corner along the negative sides of the x-axis and y-axis

But on Safari, negative values for sx and sy reset the top left coordinates to 0,0 and affect the RIGHT BOTTOM CORNER of the sub-rectangle of the source image, to draw into the destination context.

This is how the attached demo snippet of canvas renders on Chrome and Safari (outline being the boundary of the canvas):

Any work around for this will definitely help.

EDIT: Source width and source height doesn’t exceed the actual image’s width or height.

Источник

Если Safari на компьютере Mac не открывает веб-страницу или не работает должным образом

Если Safari на компьютере Mac не работает должным образом, может помочь одно из перечисленных ниже решений.

Эти решения подходят для проблем, связанных с Safari на компьютере Mac, включая следующие. Прежде чем начать, убедитесь, что компьютер Mac подключен к Интернету.

• Веб-страница пуста, или не отображается все ее содержимое
• Невозможно войти на веб-страницу, несмотря на использование правильной информации для входа.
• На веб-странице появляется запрос удалить или сбросить файлы cookie.
• Safari работает медленно или перестает отвечать.

Перезагрузите страницу

Если страница не открывается или не загружается, попробуйте перезагрузить ее, выбрав «Вид» > «Перезагрузить страницу» или нажав Command-R. Если это не помогает, нажмите Command-Q, чтобы закрыть Safari, а затем снова откройте этот браузер и повторите попытку. Если Safari не закрывается, нажмите Option-Command-Esc, чтобы принудительно завершить работу Safari.

Установите обновления программного обеспечения

Отключите расширения Safari

Даже если расширения Safari обновлены, временно отключите их, чтобы убедиться в том, что они не влияют на работу браузера неожиданным образом. Выберите Safari > «Настройки», а затем перейдите на вкладку «Расширения». Чтобы отключить расширения, снимите соответствующий флажок.

Выполните проверку с использованием частного окна

На компьютере Mac могут храниться файлы cookie, кэши и другие данные веб-сайта, проблемы с которыми могут повлиять на его использование. Чтобы запретить веб-сайту использовать эти данные, откройте его в частном окне, выбрав «Файл» > «Новое частное окно».

Если при этом браузер работает нормально, выполните следующие действия, чтобы удалить данные веб-сайта с компьютера Mac. После этого веб-сайт может создавать новые данные по мере необходимости. Если это веб-сайт, на который вы входите, прежде чем продолжить, убедитесь, что вы знаете свои данные для входа.

1. Выберите Safari > «Настройки» и нажмите «Конфиденциальность».
2. Нажмите «Управлять данными веб-сайтов».
3. Выберите затронутый веб-сайт в представленном списке.
4. Нажмите кнопку «Удалить».
5. Нажмите «Готово».
6. Снова откройте данный веб-сайт в нечастном окне браузера.

Проверьте сетевые параметры

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

Чтобы выяснить, связана ли проблема с сетевыми параметрами на компьютере Mac, попробуйте открыть данный веб-сайт на другом устройстве, подключенном к той же сети. Также можно добавить новое сетевое размещение в настройках сети, чтобы быстро сбросить сетевые параметры для тестирования.

Чтобы выяснить, связана ли проблема с самой сетью, попробуйте открыть данный веб-сайт после подключения к другой сети.

Источник

CSS и iOS Safari

Доброго времени суток, дорогие хабрахабровцы!

Всегда хочется, что бы твой сайт выглядел одинаково хорошо на разных устройствах, включая и мобильные. Но, если поведение в браузерах Android во многом предсказуемо, то с iOS возникает ряд «сюрпризов». О них сегодня и поговорим!

Часть примеров уже публиковалась на Хабре, но я все-равно решил включить их в статью. Разделю статью на две части. В первой – приведу список полезных css-свойств для webkit, а во второй поговорим о фиксах проблем, возникающих при версте для iOS Safari.

Свойства

1. -webkit-overflow-scrolling: touch

Это css-свойство добавит плавный скролл в блоках с overflow: scroll. Рекомендую добавлять это свойство везде, где внутри блока может возникать прокрутка, к примеру, в мобильном меню.

2. -webkit-text-size-adjust: none

Отключает масштабирование текста в горизонтальной ориентации.

3. -webkit-tap-highlight-color: #ccc

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

Пример такого выделения:

4. -webkit-appearance: none

Отключает наложение на элементы стилей системы: тени, border-radius и т.д. Применяется для input (но не всех), textarea, и т.д. Удобно, когда надо задать единый вид элементов на всех устройствах.

Применяется не только в верстке для Safari.

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

Можно использовать не только в верстке для Safari.

Фиксы

1. background-attachment: fixed

Проблема: background-attachment: fixed не работает в iOS Safari.

Решение: Фиксировать не фон, а блок или псевдоэлемент.

2. Нежелательный скролл модального окна

Проблема: Это довольно редкий случай, но для общей информации, думаю, так же полезно будет знать о нем. Если модальное окно имеет собственную прокрутку и в закрытом состоянии просто установлен отрицательный z-index (и, к примеру, opacity: 0) — то при попытке скролла страницы, модальное окно может перехватить скролл. В результате чего не будет осуществляться прокрутка страницы.

Решение: Добавляем pointer-events: none к модальному окну в закрытом состоянии.

3. Пропадание меню при скролле
Для того, что бы меню «прилипало» к верхней границе экрана при скролле страницы, часто используют следующий прием. Изначально у меню установлено свойство position: absolute, и при достижении верхней границы окна, через js оно меняется на fixed. А при скролле страницы к началу, значение опять меняется на absolute.

Проблема: В Safari на iOS, при смене position с fixed на absolute, меню пропадает с экрана пока скролл не завершится.

Решение: Использовать для меню position: -webkit-sticky. Поведение меню будет сравнимо с вышеописанным, но пропадать ничего не будет! Плюс, не надо использовать js

К слову, значение sticky для свойства position сейчас поддерживается большим количеством браузеров, поэтому его можно использовать и в десктопных браузерах.

4. Блок с position: fixed при скролле

Если реализации решений предыдущих проблем я видел на некоторых сайтах, то данная проблема на сайтах встречается постоянно.

Проблема: При скролле в браузере изменяется высота экрана. Отсюда, если при раскрытом меню или модальном окне не блокировать скролл, возникает подобный эффект:

Решение: Нужно сделать следующий «трюк», используя transform.

Величина в 70px покрывает разницу в изменении высоты окна. И только transform позволяет прорисовывать фон элемента за пределами экрана в данной ситуации.

Выводы

А выводов особо нет, просто пользуйтесь ) Если знаете еще полезные css-свойства или «фиксы», применимые на практике, пишите в комментариях!

Спасибо за внимание!

Update
В свойствах изменен пункт 5. Т.к. media (hover) имеет узкую поддержку. Спасибо dom1n1k за ценное замечание.

Источник