Search the Community
Showing results for tags 'firefox'.
Found 67 results
-
I have a special case, where I would like to rotate 90 degree a cuboid. It all works fine in Chrome, but there are some glitch in latest Firefox and I'm not able to find out what could cause this: This happens lot of time for me, also when you resize the lower pane of codepen, it sometime renders fine. Also before the animation finish, the red pane is false rendering it's rotation and also another glitch happen. You can see it in codepen, by commenting out timeline.play(); and uncomment: timeline.progress(0.93); Is there any way to solve this issue?
-
Hi all, I'm having this problem with SVG rotation. Basically it always reset its position once the animation is finished. Codepen: http://codepen.io/anon/pen/QwwEYX During testing, it works fine on Chrome, but not of Firefox and mobile Safari. I'm using Firefox 33.1.1. Anyone's having the same issue? Any pointer is greatly appreciated. Cheers! UPDATE: Apparently the problem is exclusive to FF for mac and Safari mac.
-
Hi, I’ve spent the last day building a working rubix cube demo using TweenMax to position and animate the objects accordingly. Draggable is being used to rotate the cube X/Y and throwProps is used too. Firefox is displaying some very odd, back-face type display issues that I can't seem to resolve, can anybody suggest a work-around or fix to correct this problem? IE10 is simply flattening the whole object onto a 2D plane and not allowing any z-depth. The demo will auto rotate 20 times before allowing user interaction by "swiping" a side to rotate it, or dragging the background to rotate in the cube in 3D space. Any help would be gratefully appreciated. View the demo here: http://www.rogueinteractive.net/rogueiOS/rubix.html Pete
-
Hi, I've just stared working with GS in Javascript and so far love the ease of use and its flexibility. However, after testing my animations in different browsers, I've been encountering problems with certain parts. Everything was working great in Chrome, but Safari and Firefox seems to render things differently, such as elements that are misplaced in Firefox, or some that don't even show up in Safari. Any idea what can be causing these compatibility issues? Please, check the link below: http://jsbin.com/ferin/19/edit Thank you
-
My apologies for being a bit off topic... On my computer it is very common to see a replacement icon rather than font symbols in FFox. Attached are examples from Codepen and SitePoint. The symbols on both these pages display properly in Chrome and IE. I can't be the only person who has this experience - it probably happens to many of our clients. Any ideas what causes it and how to avoid? Thanks.
-
One co-worker has done these animation flips. TweenLite.to(banner_box_7, .18, { rotationX: banner_flip_dgr, transformOrigin: banner_fliptype, ease:banner_flip_ease_in, ....... And we get these pixel lines stuck (only sometimes on firefox only) First image is before animation, later is in mid animation and you can see 1px lines getting stuck. Anyone who know what can cause this. ** Update ** I know what caused this, it´s a bug in current Firefox version https://bugzilla.mozilla.org/show_bug.cgi?id=505115 moderator can close this thread.
-
Hi, first of all i love the Engine. I use the latest 1.11.1 engine. Today, after the FireFox 25 Update has been released, we get 2 very strange effects in Firefox on MAC. 1. Some Easing (like power3.ease..., power4, power2..) adds a black background for Transparent PNG Images. If i change this easing to linear or i.e. Back.easeOut the black bg disappear. Live: http://www.themepunch.com/codecanyon/revolution_wp/fullwidth.php (slide 2) See Video also: http://screencast.com/t/JiQap5oBlW 2. In Firefox the Animated Iframes with Vimeo Videos in it are not Clickable. Only in Firefox, only on PC. If i remove greensock animations of the iframe, videos are clickeable. See live: http://www.themepunch.com/codecanyon/revolution_wp/fullwidth.php (at slide 4 and slide 5) Any tipps or advise would be great ! Thanks a lot, Krisztian from ThemePunch
-
Team, Doesn't mozilla firefox support TweenMax feature? I don't see it working in IE7 too. I have a set of ordered list that will flyin on page load. This works fine in Chrome, IE8 and IE9, but it doesn't seem to work fine in Firefox 14 and IE7. Could you please let us know the support features. And the error obtained in FF is as below: "TypeError: can't convert undefined to object: Line 14, Tweenmax.js" Thanks Abhilash
-
Tested on Window and Mac, I have the same issue for Firefox, the margin & padding isn't animated. http://jsbin.com/UGOSEGO/16/edit?html,output
-
Hello I was dealing with an issue in Firefox Mobile Browser, where it would not honor overflow hidden when 3d transforming its child. So the parent that had overflow hidden, would have its childs 3d transforms display outside the parents bounds. There is an opacity: 0.99 hack that you can add to the parent your transforming, but in some instances it will cause the layout to get pushed down, and is very very frustrating to debug. .targetElementThatHas3dTransforms { opacity: 0.999; } Firefox Mobile Browser does not honor overflow hidden when using or animating 3d transforms on its child. So i came up with another hack which i find that worked. Apply this to your style sheet: * { outline: 1px none transparent; } I also did some other tests, and found out that if you add this to the element your animating, that uses 3d transforms.. it should also fix that overflow hidden bug: .targetElementThatHas3dTransforms { outline:1px none transparent; } Also if you want to apply via javascript and only apply on FireFox Mobile Browser you can do this: // check for FireFox var isFF = !(window.mozInnerScreenX == null); // check for mobile touch support var isTouch = ('ontouchstart' in document.documentElement); // check for FireFox Mobile Browser (FireFox and Mobile Touch) if(isFF && isTouch){ TweenMax.set($('.targetElementThatHas3dTransforms'),{'outline':'1px solid transparent'}); } I found out the Desktop version of Firefox doesnt like the outline on the element that has the 3d Transforms. And animates slow and blocky in some cases, So above we only add the hack when in Mobile view.. from what i noticed in my tests. This solved the Firefox Mobile Browser overflow hidden bug. Im not sure why the Firefox Mobile browser behaves this way. But I thought i would share this, so if anybody runs in to this same issue, it can provide some help. -
We have created a pretty crazy scrolling animation (link below). As you scroll it triggers zooms, opacity changes and movements, and the animation is pinned, so it responds quite differently than most scrolling websites that use a parralax visually. It seems to be testing really well across most platforms, but seems to run into some big issues in firefox exclusively for a macbook. Firefox works perfectly on pc laptops, desktops, and mac desktops. I am thinking it may have something to do with the trackpad, but still can not identify the issue. Any thoughts? Appreciate it in advance! www.housingopensdoors.ca/DEV_merged
-
Hi, The firefox fix in the current code that addresses a bug in transform could be improved. It changes the top value but if I have an element positioned with bottom it breaks my layout. One fix could be just checking if bottom is set and change the bottom value instead. Code I'm refering to: if (_isFirefox) { //Firefox has a bug that causes transformed elements to randomly disappear during (or after) animation unless a repaint is forced. One way to do this is change "top" by 0.05 which is imperceptible, so we alternate back and forth. Another way is to change the display to "none", read the clientTop, and then revert the display but that is much slower. The bug is present in at least Firefox 17 and 18 top = _getStyle(targ, "top", null, false, "0"); n = parseFloat(top) || 0; sfx = top.substr((n + "").length); t._ffFix = !t._ffFix; targ.style.top = (t._ffFix ? n + 0.05 : n - 0.05) + ((sfx === "") ? "px" : sfx); } Thanks
-
Hello. Firstly, I have to say thanks for a great package - I've been using it in Flash for quite a while and am now using the JS version. My problem is that in FF19.x, elements that I've rotated with the following line disappear once the rotation is complete: TweenMax.to(vObjString, 0.6, { css:{ rotation:-90, transformOrigin:"57px 0px" }, ease:Bounce.easeOut, onStart: mPlaySound, onStartParams: ['flag_lift'] }); vObjString is a string list of elements e.g. "a#game_flag_1, a#game_flag_2". Intermittantly they re-appear, some seconds later, but mostly they stay hidden until I use Firebug to toggle a css property eg. overflow:hidden on the containing div. Removing overflow: hidden from the CSS rule and refreshing the page has no effect - they still disappear after rotating - other than showing the previously hidden overflow (!). Everything works properly in Safari, Chrome, IE9 & 10 and it used to work in FF18 and below. I realise that this is most likely something that MOZ have changed in FF19, but I wondered if anyone else has had any similar problems, or has any ideas on a work-around? Thanks v. much. Dale
-
I know Firefox is notorious for having choppy playback. If I'm animating an image down the screen using the "top" property, using roundProps definitely helps make it less jerky. I think Firefox doesn't like things sitting on half-pixel values. How do I accomplish the same thing using the "scale" property? When I try, I think the scale value is properly rounded, but I'm still getting choppy playback. I'm not sure what's going on under the hood, but it seems like even if the scale value is rounded, the item I'm scaling will potentially still have half-pixel values for its width/height/marginLeft/marginRight/top/left (or however it's technically rendered behind the scenes). Anyone have any tips here? Thanks!
-
Hi, I was implementing a tween based on CSS3's background-size today. That would map to "backgroundSize" as defined in CSSPlugin.js. However, the tween doesn't work in the latest Firefox. While it works perfectly in the latest Chrome. I digged down until I found about this condition in _parsePosition function in CSSPlugin.js: _parsePosition = function(v, o) { if (v == null || v === "" || v === "auto") { v = "0 0"; } Debugging this, I found that 'v' was passed in as 'auto' in Chrome. But it was passed in as 'auto auto' instead in Firefox. Since 'v' was not changed to '0 0' this leads to parsing problem resulting in 'NaN' in o.ox. And thus the effect doesn't work. My TweenMax code looks like something along these lines: controller.addTween( chart.offset().top, TweenMax.fromTo($('.bub', chart), .25, {css:{opacity:0, 'letter-spacing':'30px', backgroundSize:'0% 0%'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'0px', backgroundSize:'100% 100%'}, ease:Quad.easeInOut} ), 0, -350 ); I patched CSSPlugin.js locally so that it now handles 'auto auto' case. The backgroundSize transition now works correctly on my machine. if (v == null || v === "" || v === "auto" || v === 'auto auto') { v = "0 0"; } Hope this helps. Not sure of any proper channel to report issue for TweenMax? Natthawut
-
I know Firefox is notorious for having choppy playback. If I'm animating an image down the screen using the "top" property, using roundProps definitely helps make it less jerky. I think Firefox doesn't like things sitting on half-pixel values. How do I accomplish the same thing using the "scale" property? When I try, I think the scale value is properly rounded, but I'm still getting choppy playback. I'm not sure what's going on under the hood, but it seems like even if the scale value is rounded, the item I'm scaling will potentially still have half-pixel values for its width/height/marginLeft/marginRight/top/left (or however it's technically rendered behind the scenes). Anyone have any tips here? Thanks!
-
Hello Rockstarrs, I wrote this dynamic mp3 visualizer almost a year - and it worked wonderfully. Then recently I went back to it and it stutter steps and drops frames. The only things that have changed on my end, Mountain Lion (but i noticed it even before with Lion), FP11.3. So I recompiled the SWF, opened the SWF and everything as fine! Then opened it in the browser - same issue… Uninstalled Flash Player, reset Safari, Chrome, FireFox, repaired disk permissions systemwide, reinstalled Flash - no love. Made sure I had the most current version of GreenSock and swfObject, still nothing better... Attached are screenshots of exactly what I'm talking about, and here's a link to the project live. Let me know if you're seeing everything correctly, or if yours, like mine is slicing and dicing the visual... http://joelhackney.name/spectrum/ Thanks! -Joel
