fix(Select): linear-gradient in safari fix #2228

Author: bindoon

docs/select/demo/max-count.md

@@ -43,14 +43,14 @@ const maxTagPlaceholder = (selectedValues, totalValues) => {
 const style= { width: 200, marginRight: 8 };
 
 ReactDOM.render(
-    <div style={{display: 'flex'}}>
+    <div style={{display: 'flex', alignItems: 'flex-start'}}>
         <Select placeholder="select all" hasSelectAll mode="multiple" onChange={handleChange} dataSource={dataSource} style={style} />
 
         <Select maxTagCount={2} defaultValue={['10001', '10002', '-1']} mode="multiple" onChange={handleChange} dataSource={dataSource} style={style}  /> 
 
         <Select maxTagCount={2} maxTagPlaceholder={maxTagPlaceholder} defaultValue={['10001', '10002', '-1']} mode="multiple" onChange={handleChange} dataSource={dataSource} style={style}  /> 
 
-        <Select maxTagCount={2} tagInline mode="multiple" defaultValue={['10001', '10002', '-1']}  onChange={handleChange} dataSource={dataSource} style={style}  /><br /><br />
+        <Select maxTagCount={2} tagInline mode="multiple" defaultValue={['10001', '10002', '-1']}  onChange={handleChange} dataSource={dataSource} style={style} /><br /><br />
     </div>
 , mountNode);
 ````

src/select/main.scss

@@ -478,4 +478,18 @@
     }
 }
 
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+    #{$select-prefix}-multiple {
+        #{$select-prefix}-compact {
+            #{$select-prefix}-tag-compact {
+                background: linear-gradient(90deg, rgba(255, 255, 255, 0), $input-bg-color 10px);
+            }
+        }
+
+        .#{$css-prefix}disabled #{$select-prefix}-tag-compact {
+            background: linear-gradient(90deg, rgba(255, 255, 255, 0), $input-disabled-bg-color 10px);
+        }
+    }
+}
+
 @import "./rtl.scss";