瀏覽器反鋸齒（光滑線條）

在我的滑塊中，我遇到了問題，在我的漸變效果結束後，我的旋轉容器的一部分看起來像是一個步驟。我可以在這裏提供了一個例子：瀏覽器反鋸齒（光滑線條）

http://lamit.webflow.com

正如你可以在滑塊看，效果時，我的文字欄的底部是光滑的。過渡之後，它看起來很奇怪。

任何關於如何擺脫的想法？

更新

由於這個網站是做webflow，也有一些CSS-錯誤，同時分析代碼（由於從一個Webflow一些預防措施）。

相關的代碼如下：

CSS

.mask { 
    left: -2%; 
    top: -50px; 
    display: block; 
    width: 105%; 
    margin-right: auto; 
    margin-left: auto; 
    -webkit-transform: rotate(-3deg); 
    -ms-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
}

HTML

<div class="w-slider slider" data-infinite="1" data-autoplay="1" data-delay="4000" data-duration="5000" data-animation="fade"> 
    <div class="w-slider-mask mask"> 
     <div class="w-slide"> 
      <div class="slide-zusatz1"> 
       <div class="w-container slidertext"> 
        <p>Here is some text</p> 
       </div> 
      </div> 
      <img src="myimg.png"> 
     </div> 
    </div> 
</div>

感謝

來源

2015-04-21 DasSaffe

可以添加一些相關的HTML和CSS代碼？ – Vinc199789

嗯，這很奇怪。改變滑塊上的圖像會導致底部變得平滑，然後短暫延遲後再次變爲「塊狀」。 –

雖然鏈接到我們可以看到問題的頁面是很好的，但是您可以在此添加相關代碼嗎？從[幫助頁面]（http://stackoverflow.com/help/how-to-ask），_「如果可以創建可以鏈接到的問題的實例（例如，http： //sqlfiddle.com/或http://jsbin.com/）然後這樣做 - 但也包括代碼在您的問題本身。不是每個人都可以訪問外部網站，並且鏈接可能會隨着時間的推移而中斷。「_ –

您可以打開硬件加速渲染。要在瀏覽器中觸發，您需要使用任何使用它的CSS屬性。

例如，我將transform: translateZ(0)添加到您的旋轉div元素。下面是結果：

enter image description here

來源

2015-04-21 09:07:52

如果添加-webkit-backface-visibility: hidden;它會刪除抗鋸齒，有點修復與trans有很多相關的事情在鉻和Safari瀏覽器的形式！

.slider { 
    -webkit-backface-visibility: hidden; 
}

我的猜測是，當試圖渲染轉換元素的背面時，它會以某種方式導致z渲染問題。去掉背面似乎解決了這個問題。

另外，正如其他答案所提到的，您還可以通過明確地設置z軸的翻譯位置來解決此問題，其中還包括transform: translateZ(0);，它允許硬件加速啓動並通過不同的路徑解決問題。

來源

2015-04-21 09:07:21 RichieAHB

變化w-slide的變換：

transform: translateZ(0px) translateX(-1300px);

添加Z-視角3D變換修復該問題。

或者，您可以使用backface-visibility: hidden;，如其他地方所述。根據您的required browser support，您可能需要使用供應商特定的前綴

來源

2015-04-21 09:07:29 SW4

瀏覽器反鋸齒（光滑線條）

回答

相關問題