Famo.us Browser & Device Support

Famo.us works in most modern browsers; it’s also compatible via tools like Cordova, which allow you to package your project as a native application. Due to inconsistencies between different browser implementations, though, there are a few notes to keep in mind.

Browsers

Chrome, Safari, and Firefox have first-class support. Famo.us should, however, work in most modern browsers with HTML5/CSS3/JavaScript support.

Internet Explorer: If you are working with Microsoft browsers, it should be noted that all versions of IE have a bug with respect to the CSS3 preserve-3d attribute, which specifically affects 3D interfaces. We are currently working with Microsoft to resolve this bug, and will update our newsletter when it is resolved. If you are experiencing difficulty with IE and you need help, please email us at support@famo.us.

Famo.us is actively tested in the following browsers:

Chrome
Firefox
Safari
IE11+

Devices

Famo.us supports modern desktop computers, laptops, and mobile devices.

Famo.us is actively tested on the following devices:

Android phones: Nexus 4, Nexus 5, Nexus 6, Moto G
Android tablets: Nexus 7, Nexus 9
iOS phones: iPhone 4S, iPhone 5/5C, iPhone 5S, iPhone 6
iOS tablets: iPad 3/4, iPad Air, iPad Mini, iPad Mini Retina

Television sets: We have performed several experiments running Famo.us on televisions sets, including Samsung and LG sets, but these devices are not officially supported. IOT devices have been experimented with successfully, as well as VR devices, but are also not officially supported at this time.

Known browser- & device-specific issues

Each browser and device comes with its own set of quirks. Understanding the limitations of the browsers and devices — and how Famo.us behaves when encountering these limitations — is very important when developing applications that are cross-browser and cross-device compatible. Below are some of the known browser/device issues that you may come across while developing with Famo.us.

All browsers

Unexpected results when hiding overflow: Combining overflow: hidden and CSS transforms in z-space causes unexpected results. Unfortunately, this is a bug common in the majority of currently available browser implementations. The inclusion of overflow: hidden causes the browser to not interpret z depth correctly when a perspective is set. Avoid setting overflow: hidden if possible.

Performance degradation when using semi-transparent windows: Frame-rate in the browser will take a serious hit when semi-transparent windows lie over them. Be careful when organizing the windows on your desktop, as this can lead to very confusing performance drops.

Chrome & Firefox

Incorrectly rendered intersecting surfaces: Intersecting surfaces do not render correctly in Chrome and Firefox. Because of the extensive use of rotation and translation in Famo.us, it is common to come across this issue frequently.

Chrome

Invisible surfaces at certain rotations: When a Surface is inserted in the Render Tree, if it is rotated in such a way that none of its pixels would be visible from the current perspective, Chrome will not draw that Surface at all. This is due to the fact that Chrome tries to save performance by not drawing pixels that cannot be seen. Two ways to combat this:

Do not apply that rotation until immediately before that Surface needs to be seen
Give that Surface the property backface-visibility: visible to force Chrome to paint those pixels

Safari

Slow garbage collection: Garbage collection in Safari tends to be more pronouced. If an application is performant in Chrome and Firefox but not on Safari, it may be fixable by having more intelligent memory allocation.

iOS7 iPad

Miscalculated window.innerHeight: iPads that are running iOS7 miscalculate window.innerHeight when they are in landscape orientation. This poses issues for developers relying on the window’s size for laying-out components.

Android

Blurry images: When using Famo.us on an Android device, it is common that images will be blurry. This can be fixed by setting a perspective on your context to any non-zero value, like this: context.setPerspective(1)

Bitmap scaling artifacts: Images that are scaled smaller before being added to the render tree will have their bitmap affected. If that scale transform is then removed, the image will not be displayed using its actual bitmap, due to Android’s eager optimization to cache the initial bitmap. To combat this, avoid scaling images before they are added to the render tree.

Next: Licensing »