如何強制重新渲染後的WebKit 3D在Safari

變換我使用CSS 3D轉換放大一個div，例如：如何強制重新渲染後的WebKit 3D在Safari

-webkit-transform: scale3d(2,2,1);

在任何WebKit瀏覽器縮放本身工作正常。但是，在Safari（移動設備或Windows）上使用此功能時，div的內容不會被重新渲染。結果是縮放後內容變得模糊。

只有使用3D變換時纔會出現此效果。使用時一切正常

-webkit-transform: scale(2);。

爲了利用iPhone/iPad上的硬件加速功能，最好使用3D轉換。

是否有人知道如何告訴Safari重新渲染一個新的規模的股利？

來源

2011-01-09 FatCat123

你怎麼知道瀏覽器不是重新渲染DIV的內容？它是否包含圖像com – JoshNaro

文本模糊的原因是因爲Webkit將文本視爲圖像，我想這是硬件加速的代價。我假設你正在使用轉換或動畫關鍵幀在你的用戶界面，否則性能增益可以忽略不計，你應該切換到非3d轉換。

您可以：

•添加事件偵聽爲transitionend然後更換3D轉換爲標準的變換，如...

element.addEventListener("transitionend", function() { 
    element.style.webkitTransform = 'scale(2,2)' 
},false);

•由於Webkit的把東西爲圖像，最好從大開始縮小。所以，寫你的CSS在你的「最終狀態」和其縮小爲您的正常狀態......

#div { 
    width: 200px; /*double of what you really need*/ 
    height: 200px; /*double of what you really need*/ 
    webkit-transform: scale3d(0.5, 0.5, 1); 
} 

#div:hover { 
    webkit-transform: scale3d(1, 1, 1); 
}

，你會得到一個懸停文字酥脆。我在這裏做了一個演示（在iOS上也工作）：

http://duopixel.com/stack/scale.html

來源

2011-01-31 03:46:09 Duopixel

爲我工作，雖然在邊距和填充這些2x'ed縮放元素有一些非常奇怪的行爲。 – matt

我試圖做同樣的事情。我認爲這裏發生的事情是Safari只是縮放像素。也就是說，它執行所有「正常」瀏覽器渲染，然後縮放結果的像素。

示例：將較高質量的圖像（例如1000x1000像素）放在小格（200x200像素）中，並將圖像設置爲100％的寬度和高度。當您將3D轉換爲5倍縮放比例時，結果將在Safari中變得模糊，而在Chrome中變得更加清晰。使用2D變換，圖像在兩者中都會顯得很清晰。

解決方法是在完成3D之後轉換爲2D變換。然而，我發現在轉換之間進行轉換時有一點點延遲，所以這對我來說工作不太好。

來源

2011-05-02 19:21:27 JoshNaro

我發現試圖迫使一個div的重繪在Safari的另一個原因（重新計算懸停文本溢出）時，說起來很簡單：

selector { 
    /* your rules here */ 
} 
selector:hover { 
    /* your rules here */ 
} 
selector:hover:after { 
    content:""; 
}

我做了懸停的東西，改變填充到可以容納一些按鈕，但是在safari/chorme中，它不會正確重新計算內容，在僞類之後添加：。

請注意，我沒有在互聯網上找到這個地方，我在擺弄時發現它。

來源

2012-04-08 22:45:15 Rodrigo

我找不到在Safari（桌面v7.0.2和iOS 6.1.3和7.0.6中包含的一個）中放大縮小模糊的修復方法，但我在某個時候做過，注意到我當我將刻度設置爲5時，我得到了一個尖銳的png。我不知道爲什麼，因爲我的代碼版本在我所做的所有後續更改中都丟失了。所有其他比例因子都很模糊。

由於iPhone和iPad是這個項目的目標設備，我最終放棄了縮放轉換和動畫圖像高度。我感到失望的是，Safari團隊決定以這種方式實施轉換，使得這些轉換在許多情況下都不可行。

來源

2014-03-10 21:57:29 Hoby

嗯...我越來越想擴大谷歌Chrome瀏覽器53

我到目前爲止發現的唯一的解決辦法是隱藏圖像映射圖像（hidpi）同樣的問題（或包含圖像的div），然後再次顯示。可以使用不透明度= 0或可見性=隱藏，但實際上至少在一兩幀內不可見。

這，BTW，甚至不是3d變換。只是2D的東西。

來源

2016-10-18 18:26:25 Orwellophile

嗯...我越來越想擴大谷歌地圖的圖像（hidpi）使用Chrome 53

一種解決方案是隱藏（混濁，能見度）相同的問題幾幀圖像（或容器包裝的圖像/影像/不管它是什麼）......更好的解決方案，我在SO另一篇文章發現這（對含DIV發佈）：

e.style.transform = 'translateZ(0) scale(1.0, 1.0)'

順便說一句，我的東西只是普通的2d的東西，translateZ雖然似乎有所作爲，儘管我從來沒有碰過任何3D。

來源

2016-10-18 18:32:04 Orwellophile

如何強制重新渲染後的WebKit 3D在Safari

回答

相關問題