Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Jonathan

Regarding Firefox Mobile Browser not honoring overflow hidden when using 3d transforms

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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. :)

  • Like 1
Link to comment
Share on other sites

Thanks, Jonathan.

 

This info could certainly be useful to us and fls in the community.

Link to comment
Share on other sites

Thanks Carl..

 

After some more tests... I edited and updated the above to also just target the element being animated. Also I have added a check using object feature detection, if anyone wants to just apply the hack to Firefox Mobile Browser.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×