奇形怪状的bug

[unclay]

收集各种奇怪的bug

[unclay]

安卓机，使用rem，小圆点不圆

.circle {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 100%;
  background: red;
}

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

解决方法：用px，或者用图片（png、svg）

附加circle.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" version="1.1"
xmlns="http://www.w3.org/2000/svg">
   <circle cx="100" cy="100" r="100" fill="#F76260"/>
</svg>

[unclay]

判断一个数字的小数点部分不超过4位数

初版

const num = 0.0000001;
const arr = String(num).split('.');
if (arr[1] && arr[1].length > 4) {
  console.log('error number');
}

当 num 为 1e-4 的科学数时，上面逻辑会绕过，不会出现 error

更改后，通过 toFixed 处理后，判断前后值是否有变化来判断小数点是否超出

const num = 1e-4;
if (String(num) !== num.toFixed(4)) {
  console.log('error number');
}

[unclay]

小米6
video标签的元素尺寸较小的时候，icon会被切掉一部分，显示不出来
被触发播放后，元素层级变为顶层，会遮住那些悬浮的元素

[unclay]

悬浮在底部的输入框，触发键盘后，窗口向上滚动；
失去焦点后窗口没滚动回来，需要手动以下方式滚动回来

document.body.scrollTop = document.body.scrollTop;