TruongNH Posted March 6 Share Posted March 6 I'm facing a problem with animate html inside foreignObject. when I click the button it animates. it works normally on desktop and Android devices and is debug responsive with iPhone on the Chrome dev tool. but when I'm testing in a real iPhone. it causing problems. the text and jumping big above the SVG and this is not i want. how can i fix it ? Please help me. this is the demo in codesandbox: animate html ìn foreignObject - CodeSandbox Link to comment Share on other sites More sharing options...
Rodrigo Posted March 6 Share Posted March 6 Hi, Sorry about the issues but I'm afraid that this more related to an iOS rendering issue rather than a GSAP related one. This is a fork of your demo using CSS keyframes instead of GSAP for animations: https://codesandbox.io/p/sandbox/animate-html-in-foreignobject-forked-wm3g9z?file=%2Fsrc%2Fstyles.css%3A24%2C57 This is a direct link to the app (no editor) so is easier to see on devices: https://wm3g9z.csb.app/ If you check with an android device you'll see that it works as in desktop but on an iOS device (iOS 17 iPad on Chrome and Safari) it looks like your demo, the position of the elements is not right. Sorry I can't be of more assistance 😞 Happy Tweening! Link to comment Share on other sites More sharing options...
TruongNH Posted March 7 Author Share Posted March 7 6 hours ago, Rodrigo said: Hi, Sorry about the issues but I'm afraid that this more related to an iOS rendering issue rather than a GSAP related one. This is a fork of your demo using CSS keyframes instead of GSAP for animations: https://codesandbox.io/p/sandbox/animate-html-in-foreignobject-forked-wm3g9z?file=%2Fsrc%2Fstyles.css%3A24%2C57 This is a direct link to the app (no editor) so is easier to see on devices: https://wm3g9z.csb.app/ If you check with an android device you'll see that it works as in desktop but on an iOS device (iOS 17 iPad on Chrome and Safari) it looks like your demo, the position of the elements is not right. Sorry I can't be of more assistance 😞 Happy Tweening! so it means this is the rendering issue of foreignObject on IOS and can't fix that right? Link to comment Share on other sites More sharing options...
Rodrigo Posted March 7 Share Posted March 7 9 hours ago, TruongNH said: so it means this is the rendering issue of foreignObject on IOS and can't fix that right? Well I don't know if it can't be fixed, but the issue is not caused by GSAP, that I can tell you. Unfortunately we don't have the time resources to dig deep into something that is not GSAP related and fix it for you, is beyond the scope of what these free forums are for, sorry. That doesn't mean though if that another user stumbles upon something similar, finds a solution can report it here, I just want to manage expectations, that's all. Happy Tweening! Link to comment Share on other sites More sharing options...
Cassie Posted March 7 Share Posted March 7 You can still report the bug - we're just not the people to report it to! https://webkit.org/reporting-bugs/ I wouldn't hold your breath though, SVG is a *very* slow layer of the web ecosystem, it's rare for stuff to get fixed, updated or worked on. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now