[ios16 safari black border bug]

 Yes, this should be a bug in Safari

This problem only seems to occur with elements created by document.createElement

will-change and force3D: false These two methods have been tried and still have black border

 

It seems like this should be a big bug, but I searched the Internet and did not find a similar problem

Do you have any other suggestions? Be able to solve this problem

 

thanks

 

[ios16 safari black border bug]

It should be related to translate3d (force3D)
Does this property not work on ios anymore?

[ios16 safari black border bug]

Using safari to access the page, the elements on the page will appear black border

Reproduction method.
1.Visit the test url and wait for it to finish loading
2. Exit safari and run a large application such as a game
3. Quit the game and reopen safari, random elements on the page will appear black border

Not every time it appears, you need to try more times
This problem did not exist before, seems to be after ios16 will have (not sure)
My phone model is iphone 13

Does anyone know what is going on?
Thank you

 

test url

https://h5.legions.tech/flight/test.html

 

 

 

[The object in Draggable does not listen to the mousedown event, but the click and touch events are fine]

Thank you！

[The object in Draggable does not listen to the mousedown event, but the click and touch events are fine]

The object in Draggable does not listen to the mousedown event, but the click and touch events are fine。

How to listen to the mousedown event？

Thanks

See the Pen mdXxjao by lzy100p (@lzy100p) on CodePen

[timeline.render in older versions]

3 hours ago, GreenSock said:

You can just set immediateRender: false in the fromTo() to make it NOT render until it begins playing. 

 

The behavior is identical in all versions. 

 

By default, immediateRender is true for .from() and .fromTo() tweens because that's typically what people want. If you want to override that by setting immediateRender: false, you would set that on each .from() and .fromTo() tween. You'd have to do that in old versions too.

Still wish there was a render method，Very helpful for me

 

One more problem was found when upgrading the old project:

Tween does not overwrite the previous Tween very well

See the Pen XWaQKpx by lzy100p (@lzy100p) on CodePen

In gsap2 it will stop after 1 second

This is very different from gsap2

 

[timeline.render in older versions]

19 hours ago, GreenSock said:

No, immediateRender is a tween-specific property. You shouldn't put that on a timeline. 

 

For your example, you could greatly simplify things by using a .fromTo() which by default has immediateRender set to true anyway: 

 

I noticed you're using the very old/outdated syntax too. I would HIGHLY recommend using the more modern syntax. There's no more TimelineLite/TimelineMax or TweenLite/TweenMax. See

Happy tweening!

 

Thank you very much for your advice, the previous project was done with the old version, recently trying to update to the new version

I don't like to use fromTo because it will start the movement immediately

In some complex timelines I usually initialize the objects all at the beginning as they were at the beginning, and then use them later in the timeline

 

like this

 

If I switch to the new version do I have to add intermediateRender on every line or just on the first line?

 

thanks

 

[timeline.render in older versions]

On 11/12/2021 at 1:57 PM, GreenSock said:

Can you please explain why you used the undocumented .render(0) previously? What exactly are you trying to accomplish? Is there a reason you don't just set immediateRender: true? Do you have a minimal demo that shows what you're trying to do? That would really help. 

See the Pen eYEXLRN by lzy100p (@lzy100p) on CodePen

Is that how it should be used? It doesn't seem to be working

The first frame is not rendered

            var tl = new TimelineMax({immediateRender:true,repeat:-1,paused:true})

            tl.to(div,0,{autoAlpha:0})

            tl.to(div,2,{autoAlpha:1})

            tl.play()

[timeline.render in older versions]

immediateRender is useful，Thanks

[timeline.render in older versions]

The timeline.render(0) in the old version is gone in the new version。

I found an alternative way：

timeline.seek(1)
timeline.seek(0)

But this way it looks like it renders twice，In my project there are a lot of animations and rendering them twice may cause lag

Is there an alternative to render in the new version?

Thanks

[compatibility issues]

hi,

I am an old user, I have been using the old version 2.0 before。

I need to migrate my project to 3.0，I found some problems

 

TweenMax.to(d1,"1",{x:110})

//Writing it this way will throw an error：Uncaught TypeError: Cannot use 'in' operator to search for 'duration' in 1

//2.x No problem

gsap.to(d1,{x:110,duration:"1"})

//No problem writing with gsap

 

It's not a big deal, but it's not compatible with the old project, but hopefully it will behave consistently like the old version

thanks

 

gsap v:3.6.0

[ClipPath animation doesn't work on the IOS12]

 Thanks a lot！

[ClipPath animation doesn't work on the IOS12]

ClipPath animation doesn't work on the IOS12

 

        var tl1 = new TimelineMax({repeat:-1,paused:true})
        tl1.to(div1,0,{webkitClipPath:"polygon(0px 0px,0px 100px,100px 100px)"})
        tl1.to(div1,1,{webkitClipPath:"polygon(100px 0px,100px 100px,200px 100px)"})
        tl1.render(0)
        tl1.play()

 

codepen:

See the Pen oKwMaY by lzy100p (@lzy100p) on CodePen

[i have some problem with killTweensOf()]

After running killTweensOf(), change the properties autoAlpha. It does not work.

 

killTweensOf() is in the onComplete.

i use 2 tweens,because I want to use different ease

 

See the Pen bgRVVW by lzy100p (@lzy100p) on CodePen

[there is a problem with physics2D and timeline]

var d1=document.createElement("div")

document.body.appendChild(d1)

d1.style.left="0px"

d1.style.top="0px"

d1.style.width="100px"

d1.style.height="100px"

d1.style.position="absolute"

d1.style.background="#ff0000"

 

var p3to=new TimelineMax({repeat:-1,paused:true})

p3to.to(d1,1,{autoAlpha:1,physics2D: {angle: 0,velocity: 300,gravity: 500}})

p3to.to(d1,0.3,{autoAlpha:0},"-=0.3")

p3to.render(0)

p3to.play()

 

it will throw an error

Uncaught TypeError: Cannot read property 'length' of undefined

See the Pen qqmKWa by lzy100p (@lzy100p) on CodePen