category: safari

Safari 設定 100vh 還是出現卷軸(scroll bar)

on 2022-06-20

前言

最近注意到 Safari 設定 100vh

在未滿內容的情況還是出現滑動的卷軸

這導致了體驗不佳

研究了一下發現是因為在 Safari 上有 url bar 的關係(iOS 15 以下還有 function bar)

100vh 的大小其實是這些 bar 隱藏時的大小(iOS Safari 滑動時這些 bar 會隱藏起來)

這邊試了幾種方式

改成 100%

可以改成用 100% 來取代 100vh

不過這得依情況來使用

使用 -webkit-fill-available

-webkit-fill-available 目前只有 iOS 支援

所以可以用 useragent 來處理樣式來對應使用這個 CSS 屬性

範例

結論

我自己測試了一下會偏好使用 100%

個人會希望能夠簡單處理方式就用簡單的方式處理

Read more

在點擊連結或是 redirect 前送出請求

on 2022-03-02

Intro

有時在看 GA 的 Web 數據時會發現在 Safari 的點擊 click 事件似乎會比較少

其實這背後是有原因的

主要是各個瀏覽器再處理新 direct 時的行為不一致所導致的

在 Safari 上面發生 direct 到新的 URL 的行為(超連結或是 JS 處理) 時

事件觸發過程中的任何請求會中斷甚至不會發出請求

所以這就是為何在 GA 中的 Safari 的 click 數量會有些異常的原因

雖然 GA 預設會做 setTimeout 處理

但是也不一定是百分之百處理成功

所以最佳處理方式還是自己在用個 settimeout 包起來後再 direct

像是以下範例

link.addEventListener('click', (e) => {
  e.preventDefault();

  window.gtag('event', 'click', {
    event_category: 'link'
  });

  setTimeout(() => {
    location.href = e.target.href
  }, 250)
})

如果真的要確保 GA 送完才做 direct

GA 也有提供事件發送的 callback 處理

Know when an event has been sent

但是如果網路不好的話或是 GA 事件發送請求太久會造成卡畫面的問題

是不太建議使用

同理

在自己處理 click 要發送紀錄 log 之類的行為更是要這樣處理

Refer - tracking-outbound-link-clicks-in-google-analytics.markdown

加碼

在自己設計發送 log 的情況時(例如需要額外的點擊紀錄等)

建議直接採用 GET 的方式發送然後也不要等回傳

可以使用以下的方式處理

const apiLog = function (type, data) {
  const logImage = new Image(0, 0)
  logImage.classList.add('log_image')
  logImage.src = 'https://example.com/log?type=' + type + '&data=' + data
  document.body.appendChild(logImage)
  setTimeout(() => {
    let img = document.querySelectorAll('.log_image')[0]
    if (img) {
      img.outerHTML = ''
      img = null
    }
  }, 100)
}

Read more