小编Roo*_*oWM的帖子

所以,之前出现过这个问题,比如:翻译+ Canvas =模糊文本 ,这里:CSS翻译后是否可以"捕捉到像素"？

似乎没有任何关于这些链接的结论 - 或者我读过的任何其他文章.一些响应者并不认为这很重要,所以这就是为什么在我的情况下它是:Chrome 41.0.2272.104中的屏幕截图

Safari 8.0.4中的屏幕截图(10600.4.10.7)

在Safari中查看详细信息？(看看航天飞机图像中的结构,或第3幅图像中岩石的细节)

这些家伙的CSS是

width: 100%;
height: auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);

因此,在某些情况下 - translateY将以半像素结束.左边的第一个图像最终得到一个变换矩阵,如下所示:

-webkit-transform: matrix(1, 0, 0, 1, 0, -56.5);

目前,Chrome似乎很好地呈现了这一点(我看到一些人说不同的浏览器在不同的版本中创建了这个问题),但目前Safari正在解决这个问题.所以,我修复这个问题的假设是确保只有整个像素,我已经通过数学运算并在javascript中应用变换来完成,但是当在大量图像上运行时,这会花费更多的性能时间.

我尝试了一些像CSS一样的黑客攻击,比如使用scale3d但没有成功.如果有人有任何JS免费解决方案,我将非常感谢共享的知识.

我正在寻找一些指导和/或示例来创建一种触摸对象并旋转它的方法。假设我们有一个圆圈的图像，我希望能够触摸一个点，围绕该圆圈拖动并操纵它随着我的手指移动而旋转。

我发现很多关于旋转的教程：

• http://www.williammalone.com/briefs/how-to-rotate-html5-canvas-around-center/
• http://www.switchonthecode.com/tutorials/html-5-canvas-tutorial-rotation

我只需要合并触摸部分。

有人以前做过这个或者可以透露一些信息吗？

我正在使用Malsup的Cycle 2在单独的div中创建一个带有相应滑动文本的背景幻灯片.我在这里有一些简单的标记,但似乎无法将图像裁剪掉,因此它总是100%的浏览器高度(如果你做一个薄窗口,你会看到底部的红色).

也许解决方案是jQuery或CSS - 我看到的一切建议height:auto在图像和父div上使用,但无济于事.

的jsfiddle

<div id="background" class="cycle-slideshow" 
                     data-cycle-fx="scrollHorz" 
                     data-cycle-timeout="2000"
                     data-cycle-slides="> div"
>
    <div style="background:#fcc">
        <img src="http://stoptraining.me/staged/IMG_1402.jpg">
    </div>
    <div style="background:#cfc">
        <img src="http://stoptraining.me/staged/IMG_1403.jpg">
    </div>
</div>

<div class="center">
    <div id="text" class="cycle-slideshow" 
                   data-cycle-fx="fade" 
                   data-cycle-timeout="2000"
                   data-cycle-slides="> div"
    >
        <div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor ...</p>
        </div>
        <div>
            <p>Mel eu pertinax ...
        </div>
        <div>
            <p>Utinam electram pertinacia ...
        </div>
    </div>
</div>

CSS:

body, html {
    background: red;
    padding: 0;
    margin: 0;
    height: auto;
    width: 100%;
}
#background {
    position: fixed;
    width: 100%;
    height: …

var section = $('.section');
var width = section.width();
if (width < 960)
    section.addClass('.section-slim');

有人能看出这有什么问题吗？我没有得到增加的课程.