Как решить проблему прозрачности шрифтов на холсте в Safari 5.1 на Lion?

Question

Проблема, связанная с тем, что на некоторых машинах случайным образом текст в элементе canvas не будет полностью отображаться в Safari 5.1 в Lion. Я имею в виду, что буквы выглядят так, как будто они не имеют прозрачного фона. Это происходит только на некоторых компьютерах, и иногда текст очищается после обновления. Я просто использую fillText, и он должен просто рендерить Arial.

У кого-то есть такая же проблема, и она может найти обходной путь? Я попытался вызвать перерисовку, добавив трехмерное преобразование (поворот и т. Д.), Но безуспешно.

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

Answer 1

Это проблема аппаратного ускорения на Mac с графическим процессором ATI.

Мы выполняем тот же код, рисуя на холсте: у нас была проблема на Mac, оснащенном графической картой ATI; вместо этого на MacMini (оснащенном графическим процессором Intel) рисунок был идеальным.

Если вы установите флажок «Отключить ускоренное рисование на холсте» в разделе «Отладка -> Флажки рисования / компоновки» в меню Safari, вы больше не заметите ошибок прозрачности текста.

Safari 6.0 (в Mac OS X 10.7.4) показывает ту же проблему прозрачности.

- ОБНОВЛЕНИЕ -
После многих исследований можно сказать, что это не проблема с графическим процессором, а проблема Apple: применение «Сглаживания шрифтов» на ЖК-мониторах (настройка AppleFontSmoothing).

В наших наблюдениях мы тестируем на двух машинах:
1 - Mac Mini с ЖК-дисплеем Philips
2 - iMac (с собственным ЖК-монитором)

Первая машина не показала проблему, потому что системный алгоритм не распознал монитор как ЖК-монитор.
Но если заставить AppleFontSmoothing с помощью команды defaults -currentHost write -g AppleFontSmoothing -int 2, проблема возникнет даже на Mac Mini.

Если вы не хотите, чтобы ваше приложение больше показывало проблему (управление аппаратным ускорением canvas), вы можете отключить свойство webkitFontSmoothing для объекта canvas:

var canvas = document.getElementById('my-canvas');
canvas.style.webkitFontSmoothing = "antialiased"

Answer 2

Предполагая, что у вас есть только ограниченное количество строк, которые вы хотите использовать, одним из способов является использование предварительно отрендеренных pngs вместо команды fillText. Это фактически приведет к увеличению производительности .

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