Simplify grid-visual for consistent cross-browser behaviour

core/neat/mixins/_grid-visual.scss

@@ -19,7 +19,7 @@
 ///
 /// @example css
 ///   .element {
-///     background-image: linear-gradient( … ) ;
+///     background-image: repeating-linear-gradient( … ) ;
 ///   }
 
 @mixin grid-visual($color: null, $grid: $neat-grid) {
@@ -29,39 +29,13 @@
 
   $_grid-columns: _retrieve-neat-setting($grid, columns);
   $_grid-gutter: _retrieve-neat-setting($grid, gutter);
-  $_grid-visual-object: () !default;
+  $_grid-visual-column: "#{_neat-column-width($grid, 1)} + #{$_grid-gutter}";
   $_grid-visual:
-    $color,
-    $color $_grid-gutter,
+    transparent,
     transparent $_grid-gutter,
+    $color $_grid-gutter,
+    $color calc(#{$_grid-visual-column}),
   ;
 
-  @for $i from 1 to $_grid-columns {
-    $_grid-visual-local: (
-      #{$i}: "#{_neat-column-width($grid, $i)} + #{$_grid-gutter}",
-    );
-
-    $_grid-visual-object: map-merge($_grid-visual-object, $_grid-visual-local);
-  }
-
-  @each $stop, $location in $_grid-visual-object {
-    $_grid-visual-loop-list:
-      transparent calc(#{$location}),
-      $color calc(#{$location}),
-      $color calc(#{$location} + #{$_grid-gutter}),
-      transparent calc(#{$location} + #{$_grid-gutter}),
-    ;
-
-    $_grid-visual: _neat-append-grid-visual($_grid-visual, $_grid-visual-loop-list);
-  }
-
-  $_grid-visual-loop-list:
-      transparent calc(100% - #{$_grid-gutter}),
-      $color calc(100% - #{$_grid-gutter}),
-      $color calc(100%),
-  ;
-
-  $_grid-visual: _neat-append-grid-visual($_grid-visual, $_grid-visual-loop-list);
-
-  background-image: linear-gradient(to right, $_grid-visual);
+  background-image: repeating-linear-gradient(to right, $_grid-visual);
 }