fix safe area for mixin with fallback

UNRELEASED.md

@@ -18,6 +18,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 - Ensure disabled `Button` components with a `url` prop output valid HTML ([#773](https://github.com/Shopify/polaris-react/pull/773))
 - Fixed `DropZone` which was unable to add a duplicate file back to back or add a file again once removed [#782](https://github.com/Shopify/polaris-react/pull/782). Thank you [@jzsplk](https://github.com/jzsplk) for the contribution [#425](https://github.com/Shopify/polaris-react/issues/425) and [@vladucu](https://github.com/vladucu) for the clear example.
+- Added a fallback to the `safeAreaFor` sass mixin to handle browsers that don't support `env` and `constant` [#881](https://github.com/Shopify/polaris-react/pull/881)
 
 ### Documentation
 

src/styles/shared/layout.scss

@@ -18,6 +18,7 @@
 /// $spacing.
 @mixin safe-area-for($property, $spacing, $area) {
   $spacing: if($spacing == 0, #{$spacing}px, $spacing);
+  #{$property}: #{$spacing};
   #{$property}: calc(#{$spacing} + constant(safe-area-inset-#{$area}));
   #{$property}: calc(#{$spacing} + env(safe-area-inset-#{$area}));
 }