相关疑难解决方法(0)

我一直在使用CSS3转换在我的网站中旋转带边框的图像和文本框.

问题是Chrome中的边框看起来很混乱,就像没有抗锯齿的(低分辨率)游戏一样.在IE,Opera和FF中它看起来好多了,因为使用了AA(它仍然清晰可见,但并不坏).我无法测试Safari,因为我没有Mac.

旋转的照片和文字本身看起来很好,只是看起来像锯齿状的边框.

我使用的CSS是这样的:

.rotate2deg {
    transform: rotate(2deg);
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -o-transform: rotate(2deg); /* Opera */
    -moz-transform: rotate(2deg); /* Firefox */
}

有什么方法可以解决这个问题,例如强迫Chrome使用AA吗？

示例如下:

我如何判断(出于测试目的)是否已为CSS动画启用硬件加速？

我有以下代码,它基本上放大了一个元素并使其全屏(不使用HTML5全屏API).当使用jQuery动画时,它在大多数手机上像一只口吃的哮喘龟一样运行,所以我使用的是CSS3.

这是jsFiddle示例:

$("#makeFullscreen").on("click", function() {        
			
    var map = $("#map"),
        mapTop = map.offset().top,
        mapLeft = map.offset().left;
    
    $("#map").css({
        "position": "fixed",
        "top": mapTop,
        "left": mapLeft,
        "width": map.outerWidth(true),
        "height": map.outerHeight(true)
    });
    
    setTimeout(function(){map.addClass("fullscreen")},1);
    
    return false;        
});

.mapContainer {    
    width: 150px;
    height: 200px;
    position: relative;
    margin: 0 auto;
}

.map {  
    background: #00f;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
}
.fullscreen {
    -webkit-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    -moz-transition: top …

我有一个旋转45度的div,上面有一个边框图像.

在铬和野生动物园,它呈现罚款.

在firefox中,令人讨厌的抗锯齿线出现在旋转div的边缘周围,在它的边缘和边框图像之间.

这是简单的HTML:

<div class="container">

   <div class="corner">

   </div>

</div>

这是CSS:

.container {
    margin: auto;
    width: 400px;
    height: 400px;
    background-color: black;
    outline: 1px solid #333333;
    position: relative;
    overflow: hidden;
}

.corner {
    position: absolute;
    bottom: -68px;
    right: -66px;
    width: 86px;
    height: 82px;
    background-color: #F1F2F3;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    border-style: solid;
    border-width: 14px 16px 28px;

    -moz-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
    -webkit-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 …