Browser support
To ensure the best experience for our users, we have defined a list of browsers which have complete or partial support of Mesh components and features.
Support Criteria
Mesh supports the current and previous major releases in the majority of the following browsers. The exception being Internet Explorer which has strict functional support for version 11 only.
Functional support means the function of the component is achieved, but the appearance may not duplicate that of other browsers due to a technical limitation. An example of this is the use of the CSS Grid Layout in our components on Internet Explorer (IE11). As IE11 does not have support for Grid, CSS Flex is used as a substitute to produce the same function, while sacrificing the visual aesthetics found in the Grid version on Chrome, Firefox, etc.
A supported browser does not mean other browsers and versions will not work, it simply states the browsers we are actively testing against to ensure the essential information and features are available to the user.
Supported Browsers
The following table outlines the browsers Mesh supports:
| Browser | Version | Usage | Details |
|---|---|---|---|
| Safari | 12 and later | 36.89% | There are some older Apple devices and versions of iOS that still rely on Safari 12. |
| Chrome | 98 and later | 32.52% | |
| Edge | 17 (EdgeHTML), 97 (Blink) and later | 3.69% | Given the engine migration for all platforms from EdgeHTML to Blink, we functionally support the previous major releases for each. |
| Firefox | 96 and later | 1.21% | |
| Internet Explorer | 11 and later | 0.15% | Receives functional support. |
Data provided by Google Analytics. Last updated April, 2022.
Other browsers, such as Opera and mobile browsers (Samsung Internet) have not been included on this list as they receive limited testing during development.
Polyfill
Some browsers cannot natively support certain functionality used by Mesh components. In these cases, a polyfill is required.
As stated by Remy Sharp, who coined the term, polyfill is "a piece of code that provides the technology that you expect the browser to provide natively". In other words, it is code that allows browsers to perform modern functions that are not supported out of the box.
While there is no official polyfill method that we advocate, the following have been used in existing solutions:
When working in Gatsby or NextJS environments, it is advised to use the official plugins where possible. For example, if using the polyfill.io, there is a Gatsby plugin gatsby-plugin-polyfill-io. One thing to note in NextJS environments, you may also need to transpile the Mesh components to work with Next sites.
Report an issue
If you have found a bug in one of the Mesh components, please file a bug report.