移動Safari灰階過濾器添加模糊

我去飽和圖片包含有這些過濾器：移動Safari灰階過濾器添加模糊

img { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
    filter: gray; 
    -webkit-filter: grayscale(1); 
}

它工作得很好，雖然過濾器似乎在移動Safari像素化圖像。我不知道這是爲什麼。有沒有保持清晰度的祕密方法？或者我必須忍受這個瀏覽器的缺點？舉個例子，這裏有一些並列的截圖，從iPhone模擬器採取：

With grayscale filter

Without filter

來源

2012-12-13 Jezen Thomas

這不是一個答案，但可能是一個線索：過濾器顯然是被應用到非-retina版本的圖像，可能是爲了兼容性（例如，如果它是高斯模糊，那麼模糊半徑會有差異，並且我猜這裏沒有足夠的邏輯來區分）。可能值得圍繞這一思路去谷歌 - 可能有一些專有財產，你可以指定。 – Tommy

你的意思是選擇一個較小的源圖像兼容性？這些是內嵌圖像。兩個屏幕截圖中的每個圖像的來源都是相同的。這些圖像最初大約爲300像素，並且按比例縮小以適應網格。網格調整大小以適應視口。 –

我認爲，繼承舊設備的一些行爲，Safari保留了其CSS中的四個實際像素爲1px的小說。所以我推測，當你應用一個過濾器時，它默認使用每個輸入像素作爲它在其他地方假裝的1px，因爲有些過濾器是基於這個假設的。希望有一個標誌可以覆蓋這種行爲，因爲你的過濾器顯然不關心1px內包含多少實際像素。 – Tommy

稍微有點爲時已晚，但這應該做的伎倆：

-webkit-transform: translateZ(0);

來源：http://matthewhappen.com/fixing-css3-filter-blur-on-retina-displays/

來源

2013-07-10 22:14:55 Luccas

感謝您的回答！ –

我不知道移動版Safari是否拿起過濾器風格或-webkit-過濾器。

我不相信-webkit過濾器允許你指定過濾器的分辨率，所以如果你想覆蓋這個默認行爲，你必須添加一個filterRes = 400到過濾器定義或替代方法是去內聯svg併爲你的過濾器指定一個顯式的filterRes。

<svg> 
    <defs> 
    <filter id="greyscale" filterRes="1278"> 
     <feColorMatrix etc...> 
    </filter> 
    </defs> 

Images... 

</svg>

來源

2012-12-13 21:09:35

移動Safari灰階過濾器添加模糊

回答

相關問題