CSS3變換比例（）確實使像素化一些元素

對我來說，這是一個奇蹟，爲什麼規模變換的行爲如此奇怪。圖像中下面顯示的兩個元素具有完全相同的html，但縮放變換確實像素化了一些元素...
這個奇怪的行爲只是在拖動元素上完成拖動&拖放之後出現，並且拖動的元素元件。CSS3變換比例（）確實使像素化一些元素

click to see the Image

CSS如下：

div.KE_coverflowContainer { 
    vertical-align:top; 
    height:122px; 
    width:90px; 
    padding:5px; 
    text-align:center; 
    display:inline-block; 
    margin:10px 5px 5px 0px; 
    background:#e4e4e4; 
    position:relative; 
    cursor:default; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    border: 1px solid #bababa; 
} 
div.KE_coverflowContainerHover { 
    -moz-transform: scale(2) translate(0px,29px); 
    -o-transform: scale(2) translate(0px,29px); 
    -webkit-transform: scale(2) translate(0px,29px); 
    transform: scale(2) translate(0px,29px); 
    z-index:1000; 
    cursor:move; 
    margin-top:0px; 
    border:1px solid #bababa; 
    -moz-box-shadow: 6px 6px 5px rgba(0,0,0,0.3); 
    -webkit-box-shadow: 6px 6px 5px rgba(0,0,0,0.3); 
    box-shadow: 6px 6px 5px rgba(0,0,0,0.3);  
}

添加了哈弗類作爲元素懸停...同樣的效果，如果我使用添加的

div.KE_coverflowContainer:hover

istead通過JavaScript的類（因爲：懸停不工作在IE中（在其他元素，但<a>元素），但mouseenter和mouseleave是，我是JS解決方案）。

有誰知道如何擺脫這個問題？

是否有其他方法重畫一個元素比下面的代碼？

$.fn.redrawElement = function(){ 
    return this.each(function(index, element){ 
     var n = document.createTextNode(' '); 
     $(element).appendChild(n); 
     (function(){n.parentNode.removeChild(n)}).defer(); 
    }); 
}

我問，因爲我這樣做的阻力&下降的結束，但留下的元素像素化。

編輯：

我知道模糊的原因：

如果Webkit的一個元素被縮放，然後在<canvas>標籤結束了，它就會被所迷離/像素化！不知道爲什麼，但會向Webkit Dev Team發送錯誤通知。

感謝您的幫助反正:-)

來源

2012-01-31 beatjunky99

您可以添加和（超時0後）刪除類強制重繪。不知道是否可以解決問題。 – user123444555621 2012-01-31 09:03:21

$（'。KE_coverflowContainer'）。addClass（'aunusedclass'）; （函數（）{$（'。KE_coverflowContainer'）。removeClass（'aunusedclass'）;}，0）;};}} 也沒有幫助... :-(或者我必須使用一個類在CSS文件spicified？編輯：回答我的自我：甚至沒有使用存在的類改變了一些東西！ – beatjunky99 2012-01-31 09:13:00

這是一個非常奇怪的行爲。所有瀏覽器都發生問題嗎？我在[jsfiddle]（http://jsfiddle.net/qSS6J/2/）中做了一個小演示，我沒有任何問題。 – 2012-01-31 09:17:27

作爲問題的編輯說：

我知道模糊的原因：

如果Webkit的一個元素被縮放，然後在結束0標籤，它變得模糊/像素化！不知道爲什麼，但會向Webkit Dev Team發送錯誤通知。

感謝您的幫助:-)

來源

2014-07-12 08:14:25 beatjunky99

「tag」是什麼意思？ – MMachinegun 2014-07-12 12:08:55

，你有沒有嘗試應用'-webkit-transform：translate3d（0，0，10px）;'？ – MMachinegun 2014-07-12 12:10:47

@marczking我的意思是一個'

我可能會選擇將其縮小，然後刪除縮小，當你想它在全尺寸。在這樣一切都應該看起來光滑「N乾淨

來源

2014-06-25 12:51:56 Leo

該元素有一個圖像包括最大300px x 300px，然後顯示在30px 30px，這樣不是問題！其餘的只是一個div和p容器。所以規模不應該像素化。 – beatjunky99 2014-07-12 08:12:19

CSS3變換比例（）確實使像素化一些元素

回答

相關問題