Question

All,

I m在专门供iPad使用的网络上工作,Im利用CSS3向囚犯过渡(从左边移到右边)。

我的同仁:

.mover {
    -webkit-transition:all 0.4s ease-in-out;
}

当用户点击一个顿时,我这样做:

var s = "translate3d(" + newPosition + "px, 0, 0)";
$( .mover  ).css( -webkit-transform , s);

著作: <>FIRST 用户触发过渡的时间;第一次出现非常显著的浮标。

我认识到,我不需要使用翻译3,因为我只把左翼和右翼移走,但我的理解是,这迫使我帕德使用全球邮联的加速。 (这是否正确?)

很多事事事事事事事事事事事事前会!

<>>>

I was a little ambiguous about the "flicker". In short - I ve been experimenting with a wide variety of CSS3 transitions (specifically on the iPad), and consistently - I ve noticed a distinct flicker at the start or end of the transition.

换言之,过渡本身是快乐。然而,根据确切的环境,在过渡开始或结束之前就出现了明显的浮标。

还有一个例子: 我有三个照片(PNGs)被打上顶头。

底层的PNG具有不透明性=1.0,上层2有不透明性=0.0,使用网络基-基基基基,Im能够作为光线和脱光的丝顺利过渡。当 an灭时,底部光线以不透明度为1.0,头两端为不透明度=0.0(应当为其最终状态)。

然而,正如 an灭一样,底部的光耀器也是这样。如同浏览器是重塑/复制屏幕的力量一样,这只需要二分之一。

这足以破坏效果,使过渡无法使用。 (关于我的iMac, 几乎是a%/em>,但并非完全不能接受。) 在iPad,这是不可允许的。

Answer 1

所有人,

I m not active that this is the response (特别是因为浮标本身似乎不太可预测),但anecdotally,这似乎已经消除......

不管怎么说,我做的是:

.mover {
    -webkit-transition:all 0.4s ease-in-out;
}

var s = "translate3d(" + newPosition + "px, 0, 0)";
$( .mover  ).css( -webkit-transform , s);

通常,在处决时间的FIRST上,在开释之前,我看到了一个浮标。随后的电话将顺利进行。

我所推断的是,如果在发出电算之前没有确定3个坐标,你就会看到一个浮标。第一项呼吁确定了这些坐标,因此随后的呼吁将顺利进行。

因此,我试图在引发任何ations动之前,先确定三座四座坐标(基本上,在我首次建立屏幕时,即初步确定)。

So, thereafter - when a 3d animation is called for, the div/element s starting 3d coordinates have already been established.

这似乎消除了浮油。

正如我说过的那样——我不敢肯定,这是否是一个有力、可靠的固定点,但我肯定已经在目前的项目中消除了这一问题。

Good luck.

Answer 2

我正在处理同一问题,我在此发现关于SO:

简言之,

-webkit-backface-visibility: hidden;

可能的话

-webkit-perspective: 1000;

每一物体。它为我工作,希望这也有助于你。

Answer 3

我们通过确定观点解决了许多棘手和棘手的问题。

Previously we had content going off the page (a sliding div) and the device seemed to go into conniptions when the viewport wasn t fixed, having to process data off the screen in combination with the zoom-a-bility of the displayed content.

这一主角解决了我们的问题。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

Answer 4

提出

.mover {
    position:absolute;
    -webkit-transition:-webkit-transform 0.4s ease-in-out;
}

但是,正如我所知,这迫使iPad使用GPU加速度。

两种翻译()和翻译(3d)()都造成了阻扰性的环境,并可能使用层——从通用公平市价来看缓冲。因此,我认为它们确实在加速方面有所改变。

Answer 5

div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

i 注意,如果某一页上有一个排.状态,就会浮.,即使没有附着任何 c或 j。 i 能够看你,但这可能有助于

Answer 6

我有这个问题,并研究了上述所有建议。我刚刚发现,脸面的z子可以引起这一问题。

我有3个中间层(flat)两面角,如:......中间层在浮点,而z-指数高于或与双方相同。把它移到底部完全固定了浮油。

希望会有所帮助。

友情链接