2014-02-09 234 views
3

當我使用Fabric.js生成畫布時,在iPad(迷你)和iPhone(4)中用手指輕敲時會出現惱人的閃爍。閃爍就像畫布快速變黑,然後再變白。iPad和iPhone中的Fabric.js畫布閃爍

重現步驟:

  1. 與iPad或iPhone衝浪例如。這個畫線工具: http://jsfiddle.net/fabricjs/URWru/function dummy{}

  2. 放在畫布上你的手指,將其擡起,然後回來。像使用鼠標點擊一樣快速執行此操作。手指向上時發生閃爍。如果您將手指放在畫布上一秒鐘或更長時間,然後擡起,則不會發生閃爍。

爲什麼閃爍發生,可以做些什麼來防止它?

回答

5

這是Q&A風格的答案。

解決方案很簡單。這種加入CSS:

canvas { 
    -webkit-tap-highlight-color:rgba(0,0,0,0); 
} 

瑞安樹叢介紹yuiblog.com的原因:當點擊事件是

「不幸的是,移動版Safari已經沒有辦法正常點擊用戶和委託點擊用戶進行區分,這是附加到一個容器而不是該容器的每個孩子,結果,一個委託點擊將導致整個容器被突出顯示,而不僅僅是被挖掘的項目,這對用戶來說既醜陋又令人困惑。

這個技巧據說至少可以工作:Android based browsers,iPhone Safari,iPad Safari,iPad Chrome。