iT邦幫忙

2019 iT 邦幫忙鐵人賽

1
自我挑戰組

蛻變事實-UI設計師勇闖前端城系列 第 33

[蛻變事實-隨手帳] 瀏覽器BUG-Safari 問題小筆記

在進行切版作業過程, 都是用Chrome來做檢閱開發
趕趕趕的日子好不容易檔案交出去了!!!!
接著讓身、心、靈享受最放鬆的一刻,就是客戶、老闆或PM
還在確認是否有BUG的那段時間了!
/images/emoticon/emoticon01.gif

坐在椅上蹺著腳、聽著音樂
拿起手機.....滑丫滑....滑丫滑......
以前做過簡單的QA,這時就把這精神拿出來用!
用不同的連結方式做網頁測試,並享受這近一個月努力的成果
看著每個點擊所呈現的畫面、效果內心滿滿澎湃著
確定著視覺是否符合設計指定的需求,同時注意細節。

  • 連結丟到 → Line (連結開啓)
  • 連結丟到 → Wechat (連結開啓)
  • 連結丟到 → Chrome
  • 連結丟到 → Safari

然後就....../images/emoticon/emoticon04.gif/images/emoticon/emoticon04.gif/images/emoticon/emoticon04.gif/images/emoticon/emoticon04.gif

iOS/Safari 上出現的小事件,但卻是UI/UX的大事!

/images/emoticon/emoticon10.gif....人生......好難......


以下是這週在做網頁BUG修改時遇見的手機版 safari 小BUG:

問題(UI):input 小圓角?

在chorme好好又美美直角的按鈕、input輸入框
結果在手機用safari檢閱RWD時...出現了圓角!@@!?
如下圖:

在網上查了資料,還好有有人分享
Safari 看網頁時一些輸入框都會變成帶圓角的顯示,如果希望頁面在所有瀏覽器上看的效果一致,可關閉這個圓角特性。只需要給input 或者textarea 增加如下CSS 即可:

-webkit-appearance: none; 
border-radius: 0;

輸入了這二行資料!解決了小小UI上美感的問題 /images/emoticon/emoticon07.gif


問題(UX):hover偽類在手機上需點擊2次才可連結?

這個問題比較麻煩,網路有挺多解法可以參考
(資料一併提供至下方參考資料,有需要的朋友哇可以看看研究啦)

我考量到只有一頁設計才有這問題,
因此選擇了只要在body上網绑定一个空的touchstart事件的做法:

document.body.addEventListener("touchstart",function(){ });

然後畫面就正常了!!!!ya!!!!/images/emoticon/emoticon37.gif

但有人似乎有說這做法好像有問題,
而我能力尚未看出有何不妥,如果有大大們看到這做法,知道原因的話再麻煩留言賜教
謝謝各位看官們....^0^

參考資料


上一篇
[蛻變事實-隨手帳] AOS.js / Animate.css -網頁動畫套件 (超簡易版)
下一篇
[蛻變事實-隨手帳] 聊聊在扮演QA面對RWD網頁的丫里丫雜 (歷練&心得)
系列文
蛻變事實-UI設計師勇闖前端城34

尚未有邦友留言

立即登入留言