Fix misplace Badge when browser zoom above 100% (#4749)

close #4747 #4290 #4176

CHANGELOG.en-US.md

@@ -40,6 +40,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
   * Added `treeDefaultExpandedKeys` property.[#43@rc-tree-select](https://github.com/react-component/tree-select/pull/43)
   * Fixed an overflow-wrap issue. [#42@rc-tree-select](https://github.com/react-component/tree-select/pull/42)
 * Added less variables: `@border-style-base` `@border-width-base` `@btn-danger-color` `@btn-danger-bg` and etc.
+* Fixed Badge misplace issue when browser zoom above 100%. [#4747](https://github.com/ant-design/ant-design/issues/4747) [#4290](https://github.com/ant-design/ant-design/issues/4290)
 
 ## 2.6.4
 

CHANGELOG.zh-CN.md

@@ -41,6 +41,7 @@ timeline: true
   * 新增 `treeDefaultExpandedKeys` 属性。[#43@rc-tree-select](https://github.com/react-component/tree-select/pull/43)
   * 修复了文字溢出换行问题。[#42@rc-tree-select](https://github.com/react-component/tree-select/pull/42)
 * 新增 less 变量: `@border-style-base` `@border-width-base` `@btn-danger-color` `@btn-danger-bg` 等。
+* 修复了 Badge 在页面放大时错位的问题。[#4747](https://github.com/ant-design/ant-design/issues/4747) [#4290](https://github.com/ant-design/ant-design/issues/4290)
 
 ## 2.6.4
 

components/badge/ScrollNumber.tsx

@@ -19,7 +19,6 @@ export interface ScrollNumberProps {
   count?: string | number;
   component?: string;
   onAnimated?: Function;
-  height?: number;
   style?: React.CSSProperties;
 }
 
@@ -29,7 +28,6 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
     count: null,
     onAnimated() {
     },
-    height: 18,
   };
 
   lastCount: any;
@@ -105,16 +103,14 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
 
   renderCurrentNumber(num, i) {
     const position = this.getPositionByNum(num, i);
-    const height = this.props.height;
     const removeTransition = this.state.animateStarted ||
       (getNumberArray(this.lastCount)[i] === undefined);
     return createElement('span', {
       className: `${this.props.prefixCls}-only`,
       style: {
         transition: removeTransition && 'none',
-        WebkitTransform: `translateY(${-position * height}px)`,
-        transform: `translateY(${-position * height}px)`,
-        height,
+        WebkitTransform: `translateY(${-position * 100}%)`,
+        transform: `translateY(${-position * 100}%)`,
       },
       key: i,
     }, this.renderNumberList(position));
@@ -139,6 +135,12 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
     ]), {
       className: `${this.props.prefixCls} ${this.props.className}`,
     });
+    // allow specify the border
+    // mock border-color by box-shadow for compatible with old usage:
+    // <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
+    if (props.style && props.style.borderColor) {
+      props.style.boxShadow = `0 0 0 1px ${props.style.borderColor}`;
+    }
     return createElement(
       this.props.component || 'sup',
       props,

components/badge/__tests__/__snapshots__/demo.test.js.snap

@@ -7,11 +7,10 @@ exports[`test renders ./components/badge/demo/basic.md correctly 1`] = `
     href="#" />
   <sup
     class="ant-scroll-number ant-badge-count"
-    data-show="true"
-    height="18">
+    data-show="true">
     <span
       class="ant-scroll-number-only"
-      style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
+      style="transition:none;-webkit-transform:translateY(-1500%);transform:translateY(-1500%);">
       <p
         class="">
         0
@@ -148,11 +147,10 @@ exports[`test renders ./components/badge/demo/change.md correctly 1`] = `
         href="#" />
       <sup
         class="ant-scroll-number ant-badge-count"
-        data-show="true"
-        height="18">
+        data-show="true">
         <span
           class="ant-scroll-number-only"
-          style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
+          style="transition:none;-webkit-transform:translateY(-1500%);transform:translateY(-1500%);">
           <p
             class="">
             0
@@ -301,8 +299,7 @@ exports[`test renders ./components/badge/demo/change.md correctly 1`] = `
         href="#" />
       <sup
         class="ant-scroll-number ant-badge-dot"
-        data-show="true"
-        height="18" />
+        data-show="true" />
     </span>
     <span
       class="ant-switch"
@@ -322,8 +319,7 @@ exports[`test renders ./components/badge/demo/dot.md correctly 1`] = `
       class="anticon anticon-notification" />
     <sup
       class="ant-scroll-number ant-badge-dot"
-      data-show="true"
-      height="18" />
+      data-show="true" />
   </span>
   <span
     class="ant-badge">
@@ -333,8 +329,7 @@ exports[`test renders ./components/badge/demo/dot.md correctly 1`] = `
     </a>
     <sup
       class="ant-scroll-number ant-badge-dot"
-      data-show="true"
-      height="18" />
+      data-show="true" />
   </span>
 </div>
 `;
@@ -349,11 +344,10 @@ exports[`test renders ./components/badge/demo/link.md correctly 1`] = `
       class="head-example" />
     <sup
       class="ant-scroll-number ant-badge-count"
-      data-show="true"
-      height="18">
+      data-show="true">
       <span
         class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
+        style="transition:none;-webkit-transform:translateY(-1500%);transform:translateY(-1500%);">
         <p
           class="">
           0
@@ -487,11 +481,10 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
     title="25">
     <sup
       class="ant-scroll-number ant-badge-count"
-      data-show="true"
-      height="18">
+      data-show="true">
       <span
         class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-216px);transform:translateY(-216px);height:18px;">
+        style="transition:none;-webkit-transform:translateY(-1200%);transform:translateY(-1200%);">
         <p
           class="">
           0
@@ -615,7 +608,7 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
       </span>
       <span
         class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
+        style="transition:none;-webkit-transform:translateY(-1500%);transform:translateY(-1500%);">
         <p
           class="">
           0
@@ -745,11 +738,10 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
     <sup
       class="ant-scroll-number ant-badge-count"
       data-show="true"
-      height="18"
-      style="background-color:#fff;color:#999;border-color:#d9d9d9;">
+      style="background-color:#fff;color:#999;box-shadow:0 0 0 1px #d9d9d9 inset;">
       <span
         class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-252px);transform:translateY(-252px);height:18px;">
+        style="transition:none;-webkit-transform:translateY(-1400%);transform:translateY(-1400%);">
         <p
           class="">
           0
@@ -879,7 +871,6 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
     <sup
       class="ant-scroll-number ant-badge-count"
       data-show="true"
-      height="18"
       style="background-color:#87d068;">
       99+
     </sup>
@@ -897,11 +888,10 @@ exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
       href="#" />
     <sup
       class="ant-scroll-number ant-badge-count"
-      data-show="true"
-      height="18">
+      data-show="true">
       <span
         class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-342px);transform:translateY(-342px);height:18px;">
+        style="transition:none;-webkit-transform:translateY(-1900%);transform:translateY(-1900%);">
         <p
           class="">
           0
@@ -1025,7 +1015,7 @@ exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
       </span>
       <span
         class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-342px);transform:translateY(-342px);height:18px;">
+        style="transition:none;-webkit-transform:translateY(-1900%);transform:translateY(-1900%);">
         <p
           class="">
           0
@@ -1157,8 +1147,7 @@ exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
       href="#" />
     <sup
       class="ant-scroll-number ant-badge-count"
-      data-show="true"
-      height="18">
+      data-show="true">
       99+
     </sup>
   </span>
@@ -1170,8 +1159,7 @@ exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
       href="#" />
     <sup
       class="ant-scroll-number ant-badge-count"
-      data-show="true"
-      height="18">
+      data-show="true">
       10+
     </sup>
   </span>
@@ -1183,8 +1171,7 @@ exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
       href="#" />
     <sup
       class="ant-scroll-number ant-badge-count"
-      data-show="true"
-      height="18">
+      data-show="true">
       999+
     </sup>
   </span>

components/badge/demo/no-wrapper.md

@@ -20,7 +20,7 @@ import { Badge } from 'antd';
 
 ReactDOM.render(<div>
   <Badge count={25} />
-  <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
+  <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} />
   <Badge count={109} style={{ backgroundColor: '#87d068' }} />
 </div>, mountNode);
 ````

components/badge/style/index.less

@@ -12,14 +12,13 @@
   &-count {
     position: absolute;
     transform: translateX(-50%);
-    top: -10px;
-    height: 20px;
-    border-radius: 10px;
-    min-width: 20px;
+    top: -@badge-height / 2;
+    height: @badge-height;
+    border-radius: @badge-height / 2;
+    min-width: @badge-height;
     background: @highlight-color;
-    border: @border-width-base @border-style-base transparent;
     color: #fff;
-    line-height: 18px;
+    line-height: @badge-height;
     text-align: center;
     padding: 0 6px;
     font-size: @font-size-base;
@@ -37,9 +36,9 @@
     position: absolute;
     transform: translateX(-50%);
     transform-origin: 0px center;
-    top: -4px;
-    height: 8px;
-    width: 8px;
+    top: -@badge-dot-size / 2;
+    height: @badge-dot-size;
+    width: @badge-dot-size;
     border-radius: 100%;
     background: @highlight-color;
     z-index: 10;
@@ -113,6 +112,10 @@
   &-only {
     display: inline-block;
     transition: transform .3s @ease-in-out;
+    height: @badge-height;
+    > p {
+      height: @badge-height;
+    }
   }
   // for IE8/9 display
   &.not-support-css-animation &-only {

components/style/themes/default.less

@@ -246,3 +246,8 @@
 @carousel-dot-width: 16px;
 @carousel-dot-height: 3px;
 @carousel-dot-active-width: 24px;
+
+// Badge
+// ---
+@badge-height: 20px;
+@badge-dot-size: 8px;