在 Android 原生瀏覽器上特別模糊的 SVG 圖片與 workaround

Standard

最近在執行的手機版網頁專案,針對其中許多 icons,我都使用了 SVG 圖片來取代高解析裝置下表現地慘不忍睹的 PNG 圖片,銳利的向量圖片放大縮小也不怕,真棒。

但在進行不同裝置的測試時,發現在某些 Android 上用原生瀏覽器瀏覽時,某些 SVG 圖片特別模糊,毛邊都相當明顯,但又不是每張 SVG 圖片都是如此,相當詭異。

舉個例子:


(可點圖放大)

  • 左方是正常的情況,SVG 圖檔相當清晰
    (Chrome for Android v36)
  • 右方則是在 Android 原生瀏覽器上的情況
    可以注意圖片的邊緣都相當模糊、不銳利

經過比較發現,在我這個專案的情境中,只有被套上 transform: rotateposition: fixed,且是 background-image 方式使用的 SVG 圖片會有這個問題。

上 stackoverflow 搜尋看看,果然有類似的問題被提出(雖然提問者的情境與我不同),而也有人提出了 workaround 來暫時解決這個問題。

根據討論串,這應是 Android 原生瀏覽器及 Chrome for Android 25 版之前的 issue,這個 issue 會使符合上述情境的 SVG 圖片,以 CSS 像素的密度(density)被繪製出來,但多數高階 Android 手機中,CSS 的 1px 並不等於裝置的 1px,所以會讓它看起來很模糊。

而討論串中被提到的 workaround 雖然也沒有對為何可以這樣解決的原理做太多解釋,但也滿有意思的,是在 SVG 檔案中嵌入一個透明(opacity=0)的文字物件:

<text transform="matrix(1 0 0 1 7.1079 13.5215)" opacity="0" font-family="'MyriadPro-Regular'" font-size="12">a</text>

就可讓 Android 原生瀏覽器/Chrome for Android 正常地繪製符合上述情境的 SVG 圖片,就連 zoom in 也一樣清楚噢。

[Android] 好用的 Chrome 瀏覽器之開發人員工具 – USB 網頁偵錯功能 (Chrome for Android Remote Debugging)

Standard

最近在 Android 上終於推出繁體中文的 Chrome 測試版瀏覽器,除了不支援 Flash 外,其他部分個人認為都比內建或其他 Android 網頁瀏覽器來的好用。不過只支援 Android 4.0 。

其中更包含「開發人員工具」,讓開發手機版網頁的人可以方便地在電腦上用 Developer Tools 來針對手機上的網頁進行除錯。本篇文章就來簡單介紹一下使用方法。

Continue reading