瀏覽器BUG－Safari 問題小筆記

轉載自 https://ithelp.ithome.com.tw/articles/10210198?sc=iThelpR

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

問題(UI)：input 小圓角？

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

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

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

輸入了這二行資料！解決了小小UI上美感的問題 

---

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

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

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

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

然後畫面就正常了！！！！ya!!!!

解決 Chrome 顯示 This request has been blocked，因為 HTTPS

轉載自 https://ssorc.tw/6612

Mixed Content was loaded over HTTPS, 
but requested an insecure image This request has been blocked; 
the content must be served over HTTPS.

解決一 : 在程式裡加入

header("Content-Security-Policy: upgrade-insecure-requests");

解決二 : 在 apache config 裡加入

Header set Content-Security-Policy: upgrade-insecure-requests