Jump to content
GreenSock

Search the Community

Showing results for tags 'safari-bug'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 5 results

  1. 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!
  2. 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
  3. 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.
  4. 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!
  5. 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!
×