GVKun编程网logo

使用-webkit-transform时固定的位置不起作用(webkit transform)

24

在这篇文章中,我们将带领您了解使用-webkit-transform时固定的位置不起作用的全貌,包括webkittransform的相关情况。同时,我们还将为您介绍有关$resourcetransfo

在这篇文章中,我们将带领您了解使用-webkit-transform时固定的位置不起作用的全貌,包括webkit transform的相关情况。同时,我们还将为您介绍有关$ resource transformResponse不起作用、-webkit-transform CSS属性软管字体渲染、-webkit-transform是什么:translate3d(0,0,0); 到底是做什么的?适用于身体?、-webkit-transform:在iPad上翻译块状渲染的知识,以帮助您更好地理解这个主题。

本文目录一览:

使用-webkit-transform时固定的位置不起作用(webkit transform)

使用-webkit-transform时固定的位置不起作用(webkit transform)

我正在使用-webkit-transform(和-moz-transform /-o-transform)来旋转div。还添加了固定的位置,以便div与用户一起滚动。

在Firefox中工作正常,但在基于Webkit的浏览器中却坏了。使用-webkit-transform后,固定的位置不再起作用!那怎么可能?

答案1

小编典典

经过一番研究,出现了一个错误报告上的Chromium网站上关于这个问题,到目前为止Webkit的浏览器无法对这两种效应一起在同一时间呈现。

我建议将一些仅Webkit的CSS添加到样式表中,并使转换后的div成为图像并将其用作背景。

@media screen and (-webkit-min-device-pixel-ratio:0) {  /* Webkit-specific CSS here (Chrome and Safari) */  #transformed_div {    /* styles here, background image etc */  }}

因此,到目前为止,您必须以老式的方式进行操作,直到Webkit浏览器赶上FF。

编辑:截至10/24/2012,该错误尚未解决。


这似乎不是错误,而是规范的一个方面,这是由于这两种影响需要单独的坐标系和堆叠顺序。如这个答案中所解释。

$ resource transformResponse不起作用

$ resource transformResponse不起作用

$resource这里有一个简化的示例(改编自Angular网站):

angular.module('project',['mongolab']);

function ListCtrl($scope,Project) {
  $scope.projects = Project.test();
}

angular.module('mongolab',['ngResource']).
factory('Project',function ($resource) {
  var url,dfParams,actions;

  url = 'https://api.mongolab.com/api/1/databases' + '/angularjs/collections/projects/:id';
  dfParams = {
    apiKey: '4f847ad3e4b08a2eed5f3b54'
  };

  actions = {
    test: {
      method: 'GET',isArray: true,transformResponse: function (response) {
        // line is never getting called
        console.log('transforming');
        return response;
      }
  };

  var Project = $resource(url,actions);
  return Project;
});

问题 是该线路console.log('transforming')永远不会被呼叫。这是为什么?其他一切正常。

在这里住小提琴。

-webkit-transform CSS属性软管字体渲染

-webkit-transform CSS属性软管字体渲染

这个问题与this one几乎相同,只是我在Mac上的Safari中独家看到它(我唯一需要关心的平台).它肯定与CSS有关,我想我已经把它缩小到一些似乎对文本呈现方式造成严重破坏的属性.他们是:

-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-webkit-perspective: 2500;

一旦我禁用它们(通过在前面添加“x”,例如x-webkit- *),文本就可以正常显示.启用其中任何一个都会导致borked文本.这里有几个屏幕截图可能有助于可视化差异.

http://s3.amazonaws.com/codaset/ticket/6404/665/good.png http://s3.amazonaws.com/codaset/ticket/6404/666/bad.png

有没有人知道可能导致这种情况的原因或是否可以修复?谷歌并没有非常有用.

谢谢.

最佳答案
Safari中的变换是硬件加速的.它允许更好的速度,但渲染不遵循相同的管道,并且一些质量丢失.除了不使用变换之外,你无能为力. :/

-webkit-transform是什么:translate3d(0,0,0); 到底是做什么的?适用于身体?

-webkit-transform是什么:translate3d(0,0,0); 到底是做什么的?适用于身体?

到底-webkit-transform: translate3d(0,0);是做什么的?有性能问题吗?我应该将其应用于身体还是单个元素?似乎可以大大改善滚动事件。

感谢您的教训!

-webkit-transform:在iPad上翻译块状渲染

-webkit-transform:在iPad上翻译块状渲染

所以我理解translate / translate3d使用GPU,但由于某种原因,它导致大型图形在iPad上以块/块的形式呈现.在使用翻译时,我很难找到任何声明图像最大宽度/高度的地方.

我希望能够在转换属性上使用css转换,但不能因为这个问题.即使是’top’属性上的css转换也比使用jQuery.animate()之类的东西执行得慢.

有什么建议吗?

解决方法

我有完全相同的问题,并在这个小的CSS宝石上取得了很大的成功:

-webkit-backface-visibility: hidden;

我发现将这个添加到任何正在动画的元素中解决了“块状”渲染.在某些情况下,我还必须将其添加到子元素,例如.我有一个大的包装div,并使用translateX来调整x位置.我将CSS的神奇线条添加到包装器div,以及该div的直接子节点(这是我的内容区域).玩弄它,你希望它能整理出来!

关于使用-webkit-transform时固定的位置不起作用webkit transform的问题我们已经讲解完毕,感谢您的阅读,如果还想了解更多关于$ resource transformResponse不起作用、-webkit-transform CSS属性软管字体渲染、-webkit-transform是什么:translate3d(0,0,0); 到底是做什么的?适用于身体?、-webkit-transform:在iPad上翻译块状渲染等相关内容,可以在本站寻找。

本文标签: