Jump to content
Search Community

Search the Community

Showing results for tags 'safari-bug'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 12 results

  1. My animation is working fine on Chrome but in Safari, it's a bit jittery. Any idea how I can fix this? I applied forced property, but still not working in Safari smoothly. I have attached the codepen link
  2. Hi, I'm using gsap to create a menu animation, and a faq style accordion. Everthing works perfectly on chrome, however things get weird in safari ( as usual..) 1. My menu can't even be clicked - other gsap animtions work fine, it's just the menu. I'm absolutely clueless here, no idea why this doesn't work. I used the same animation in a different project where it works. 2. The faq style accordion works, however the two lines somehow go very far apart and then snap back together. For some reason this only happens on the first click, when i replay the animation by opening and closing the faq accordion, it works fine - just the first time is buggy. I tried fixing this with will-change: transform, and the parent flex to will-change: flex-gap, i set a max height for the parent div of the two lines, no luck so far. to me it looks like its re calculating the position of the lines and the new height because accordion opened at the same time, but i have no idea how to prevent this. here's my webflow read only link https://preview.webflow.com/preview/p102?utm_medium=preview_link&utm_source=designer&utm_content=p102&preview=2eb2afd9827dbe2503f9148839dad918&pageId=6634d062c40d0d42037fb5d7&locale=en&workflow=preview here's the live site: https://p102.webflow.io/wie-ich-arbeite any help is appreciated a lot, thanks!
  3. Note: The issue only occurs on Safari. I wanted the user to see a large logo across the entire width of the screen upon entering my website, and after moving the cursor lower, I wanted the logo to shrink and move to the logo's location. Sometimes (I don't know what it depends on) there is an error like in the attached video. The problem seems to me to be that GSAP is unable to handle the change from width:100% to width: auto and therefore, instead of a smooth transition, it stops at some strange height of the logo. Here you can find video that present my problem: https://youtu.be/GbFOv4NCgrk Here you can find my website: https://melon.studio Here you can find JS code that animate my logo <script> let mm = gsap.matchMedia(); // use a script tag or an external JS file document.addEventListener("DOMContentLoaded", (event) => { gsap.registerPlugin(ScrollTrigger) // Animate From $("header").each(function (index) { let triggerElement = $(this); let targetElement = $(".menu-logo"); let targetElement2 = $(".menu-logo svg"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, // trigger element - viewport start: "bottom top", end: "bottom bottom", scrub: 1.5 } }); mm.add("(min-width: 53rem) and (min-height: 930px)", () => { tl.fromTo(targetElement, { y: "0%", width: "100%", margin: "50px 0 0 0", duration: 1 }, { width: "auto", margin: "0" }); }); }); }); ScrollTrigger.defaults({ markers: false }); </script> I tried to add different values in my GSAP script but nothing really helps :/ It looks like GSAP can't go from 100% to auto and stops when he is trying to calculate that.
  4. Hi All, I am trying to fix a rendering/scaling issue with the Safari browser where once I hover over an object and it scales, the text and the background colour where the text scales is very blurry and pixelated. It works fine with Google Chrome. Safari version: Version 17.1 I tried the below solutions but it didn't work for me: - https://gsap.com/community/forums/topic/30156-safari-v15-rendering-bug/ - https://gsap.com/community/forums/topic/25758-scaled-up-text-in-safari-is-blurry/
  5. Here's an example: https://codepen.io/helleholmsen/pen/abXvvQq Is there any known fix for this?
  6. Hi All, I have a problem with GSAP ScrollTrigger onLeave function. First, I want the GSAP animation play only one time when scroll down, and not to replay animation when scroll back up. So I use onLeave function to disable the animation play again, and refresh ScrollTrigger to reset it. It works fine on Chrome, but on Safari and Safari Mobile(iOS) it flashes towards the end of each one of the animations in the timeline. I have no idea how to fix it on safari. If anyone could give me some advice on how to fix this and any other tips to improve the performance, i'd really appreciate. (※And I find out that when the animations timeline group amount is more, the flashing problem is more serious. ) This is my demo codepen: https://codepen.io/joanna_0705/pen/NWEoPrK
  7. Hello Guys, it's my first Forum Article. I'm using GSAP for nearly a year now. I'm using GSAP + GsapSmoothScroll + ScrollTrigger and Barba.js I have some slightly complex Animations on my Site and its extremely laggy on iPhone Safari I tried a lot of Solutions that I found hear, but nothing really works. Does someone have some Ideas how to fix. Here is a Link to the Website: This is my config for the ScrollSmoother. The Lag is specially on the page uid42 thats the link i put in hear. The other pages are ok not perfekt but ok: I hope its enough information. scroll = ScrollSmoother.create({ smooth: 0.2, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements ignoreMobileResize: isMobile() && !document.querySelector("#uid1") ? true : false, normalizeScroll: isMobile() && !document.querySelector("body:not(#uid42)") ? true : false, }) On a Mission (hantha.net) Hope someone could help me.
  8. Hey guys! I just wanna show that we are having some rendering issues with ScrollSmoother in Safari browser, so I will leave here 2 videos to show the difference between Safari and Chrome. I would like to know if you have any workaround for that. Safari: Safari.mp4 Chrome: Chrome.mp4 Thanks so much!
  9. Well... I dont know if it's really draggable the cause, but that's the last thing I added on this page and before it wasn't having any problem actually. At the very end ~ 0:29: you can see the page crashing and reloading. It's actually impossible to replicate the issue on Codepen, as it'd mean replicate the whole page.. I guess it'd be too much useless content to view a single section's problem. Following an old thread with @OSUblake I did added the CSS attribute will-change to some elements that ... well... "will-change" with scrolltrigger (?lol) .. but the issue is still there. How to replicate the issue: 1) Unlock the page: https://www.whynot.media/unlock, then just to to https://www.whynot.media/su-di-noi/ till the GSAP carousel, then scroll somewhere. This is the code on that page, and below you can see the video that shows the problem. /***su di noi***/ function _funzioni_su_di_noi(){ if(body_class.contains("pagina-su-di-noi")){ function img_grid() { let griglia_ipads = document.querySelector('.contenitore-griglia-ipad'); if(griglia_ipads){ gsap.fromTo(griglia_ipads, { scale: 5, transformOrigin:"center", }, { transformOrigin:"center 60%", scale: .3, stagger: .5, scrollTrigger: { trigger: griglia_ipads, start: "top 110%", end: () => innerHeight * 6, scrub: true, } }); gsap.set(".contenuto-ipad:not(.centerBlock)", {autoAlpha: 1}) gsap.to(".contenuto-ipad:not(.centerBlock)", {duration: 0.1, autoAlpha: 1}, 0.001) // Images to make it look better, not related to the effect const size = Math.max(innerWidth, innerHeight); gsap.set('.contenuto-ipad', {backgroundImage: i => `url(//picsum.photos/${size}/${size}?random=${i})`}); const bigImg = new Image; bigImg.addEventListener("load", function () { gsap.to(".centerPiece .contenuto-ipad", {autoAlpha: 1, duration: 0.5}); }); bigImg.src = `//picsum.photos/${size}/${size}?random=50`; } } img_grid(); /*horiz scroll sections4*/ async function horiz_scroll_sections(){ let snapX,slideDelay=4,slideDuration=.3,slides=document.querySelectorAll(".slide"),prevButton=document.querySelector("#prevButton"),nextButton=document.querySelector("#nextButton"),progressWrap=gsap.utils.wrap(0,1),numSlides=slides.length;gsap.set(slides,{backgroundColor:"random([red, blue, limegreen, dodgerblue, orange, goldenrod, lime, black])",xPercent:a=>100*a});let wrap=gsap.utils.wrap(-100,100*(numSlides-1)),animation=gsap.timeline({repeat:-1});animation.to(slides,{xPercent:"-="+100*numSlides,duration:numSlides,ease:"none",modifiers:{xPercent:wrap}},0),animation.to(".slide span",{rotate:360,ease:"none",stagger:{amount:numSlides-1}},0),animation.pause(),setupDraggable();function setupDraggable(){function a(){f.kill(),this.update()}function b(a){f.kill();let b=snapX(gsap.getProperty(e,"x")+a*-g);f=gsap.to(e,{x:b,duration:slideDuration,onUpdate:c})} function c(){/*console.log(gsap.getProperty(e,"x")/-h,"wrapped",progressWrap(gsap.getProperty(e,"x")/-h)),*/animation.progress(progressWrap(gsap.getProperty(e,"x")/-h))}function d(){let a=gsap.getProperty(e,"x")/h||0;g=slides[0].offsetWidth,h=g*numSlides,snapX=snapDirectional(g),gsap.set(e,{x:a*h}),b(0),f.progress(1)}let e=document.createElement("div"),f=gsap.to({},{}),g=0,h=0;d();let i=new Draggable(e,{type:"x",trigger:".slides-container",inertia:!0,maxDuration:.75,minDuration:.1,minimumMovement:45,onPress:a,onDrag:c,onThrowUpdate:c,allowContextMenu:!0,allowNativeTouchScrolling:!0,snap:{x:a=>snapX(a,0>i.deltaX?-1:1)}});window.addEventListener("resize",d),document.querySelector("#prevButton").addEventListener("click",()=>b(-1)),document.querySelector("#nextButton").addEventListener("click",()=>b(1))}function snapDirectional(a){let b=gsap.utils.snap(a);return(c,d,e=1e-3)=>{let f=b(c);return!d||Math.abs(f-c)<e||0>f-c==0>d?f:b(0>d?c-a:c+a)}}; function dx_sx(){let e=document.querySelector(".hero-caption"),t=document.querySelector(".drag-carousel");e.addEventListener("touchstart",(function(n){let a=n.changedTouches[0].pageX;e.addEventListener("touchend",(function(e){let n=e.changedTouches[0].pageX;a<n?(t.classList.remove("mancino"),t.classList.add("destro")):(t.classList.add("mancino"),t.classList.remove("destro"))}),!1)}),!1)}dx_sx(); } horiz_scroll_sections(); }//su di noi } _funzioni_su_di_noi(); What can I do? Thanks
  10. Anyone have a fix for blurry text in Safari when it scales up? Safari does the same thing to SVGs but I found if I slightly change the rotation with an onUpdate that fixes the issue. SOLVED - see my post below.
  11. Hey, First time posting so hope i'm making myself clear and not breaking any rules :). But i have no idea what i could be doing wrong (yet). Been working on a banner ad in which masked svg elements are animated: No trouble with Chrome or Firefox. But when i rotate a div element with an masked svg inside it, the mask takes a bigger size in Safari. I've added an event listener to not have to refresh every time to see my precious yoghurt rotate ;) Can anyone point me in the right direction what could be a solution? Not sure if this is Greensock related, if not, i'll show myself out :). Thanks anyway!
  12. I'm trying to find a fix for an older version of Safari. I have some elements animating in div that I've made into a circle using border radius with an overflow hidden. It works great on the latest browsers, but in older versions of Safari the element 'breaks' out of of the div when it's animating. I've read adding a border setting to container will fix it, but it's not working when I test in Safari 7.1.4. I know this is browser but and not a GSAP issue. I'm wondering if anyone has found a good fix for this Safari issue. On the plus side it works great in IE9 the overflow animating that is ... not codepen ;-P http://codepen.io/kaplan/pen/ojmbRm Thanks!
  • Create New...