发表于

问题复现代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="zh-CN" style="font-size:50px;">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <style>
    #outer {
      position: relative; border: 1px solid #000;
      height: 2rem;
    }
    #outer:before {
      content: ""; display: block; background: #eee;
      height: 32px;
    }
    #el {
      position: absolute; left: 0; top: 0; width: 100px; background: #999;
      animation-duration: 2s;
      animation-fill-mode: both;
      animation-name: test;
    }
    @keyframes test {
      0% {
        height: 0rem;
      }
      100% {
        height: 2rem;
      }
    }
  </style>
</head>
<body>
<div id="outer">
  <div id="el"></div>
</div>
</body>
</html>

1rem = 50px，在非ios环境下，表现正常；

而在ios下可以很明显地看到，#el 的动画最终height并没有达到预期的 2rem (100px)，而是只有32px。

经过多次调试，发现如果希望动画符合预期，必须在动画开始之前强制触发页面重排，或者在下一次事件循环时再让动画渲染。

1
2
3
4
5
6
<script>
document.documentElement.clientWidht;
</script>
<div id="outer">
  <div id="el"></div>
</div>

或者

1
2
3
4
5
6
7
8
9
10
11
<style>
#el {
  /* animation-name: test; */
}
</style>
...
<script>
setTimeout(function () {
  document.querySelector('#el').style.animationName = 'test';
});
</script>

暂时没有查到相关文档。

补充：
QQ浏览器下出现的计算错误比为 1rem = 16px；
在ios safari以及微信内嵌浏览器下，计算错误比例 1rem == 1px；
而支付宝内嵌浏览器表现正常。

发表于 
1
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="80" height="80"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"></path></svg>');

如果要使用fill以hex格式设置颜色，# 需要转义为 %23；或使用颜色名称；或者使用颜色函数。

发表于

Mpvue到目前”^2.0.0”为止，还没有支持在template内使用methods和filters的计划。

Wepy下可以用wxs来解决，但Mpvue直接使用wxs会报错。

我找到一个HACK的方案，实现也很简单。

  1. 按wxs的方式在template中添加代码；
  2. 在methods下，添加一个与wxs模块同名的空function ；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<div class="container">
  <wxs module="foo">
  module.exports = function (a) {
    return a + a
  }
  </wxs>
  {{foo(1)}}
</div>
</template>
<script>
export default {
  methods: {
    foo () {}
  }
}
</script>

即可成功运行。

这个方法能应急解决部分场景。但毕竟是HACK，而且实现非常不优雅。要完全解决，还是要等Mpvue官方更新。

事实上Megalo等后发的小程序前端框架早就支持filters和methods了，证明这并非一个不可解决的问题。github上也有人提PR，Mpvue官方团队依然八风不动。是不是已经被放弃了。

发表于

  1. 用virtualbox新建虚拟机，用centos的iso进行安装。
    这没什么好说的，一路确认就行了。
    但有几点要注意：虚拟机网络设置为“网络地址转换(NAT)”，让vb自己处理；在安装程序里就把网络设置好，毕竟GUI下比命令行要方便。

  2. 虚拟机安装好以后，进入“设置 - 网络 - 网卡1 - 高级 - 端口转发”，添加一条规则ssh，子系统端口“22”，主机端口随便找一个好记的比如“9999”。
    另外，再新增一条规则http，子系统端口“80”，主机端口还是随便，我用的“9998”。
    然后下面的操作就可以在powershell里进行了，比centos的命令行环境用起来舒服不止一点。当然也可以用其他ssh客户端。 

    1
    ssh -P 9999 root@localhost

  3. 装nginx。
    因为yum自身的repo里并不包含nginx，所以要手动的添加。参考nginx官网的作法。 https://www.nginx.com/resources/wiki/start/topics/tutorials/install/
    3.1. 新建 /etc/yum.repos.d/nginx.repo ，贴入相应的内容。
    3.2. 执行yum install nginx 安装。
    3.3. 安装完成后，systemctl enable nginx.service，允许nginx开机启动。
    3.4. curl http://localhost/ ，应该可以看到nginx的欢迎页。

  4. 如果防火墙是iptables，则在iptables的设置中新增相应规则。起初我在网上查到都是iptables的设置，怎么添加规则重启服务都没用。后来才知道centos的默认防火墙是firewalld。 

    1
    2
    3
    firewall-cmd --state  查看防火墙状态  
    firewall-cmd --permanent --zone=public --add-port=80/tcp 永久开启80端口  
    firewall-cmd --reload  重启防火墙

  5. 在宿主机的浏览器中敲http://localhost:9998 ，如果一切顺利，应该也可以看到nginx的欢迎页了。

发表于

方法1

1
2
3
4
5
6
7
8
9
var str = "abcxyz";
switch(true) {
    case /xyz/.test(str) :
        console.log("1");
        break;
    default:
        console.log("0");
        break;
}

方法2

1
2
3
4
5
6
7
8
9
var str = "abcxyz";
switch(str) {
    case (str.match(/xyz/) || {}).input :
        console.log("1");
        break;
    default:
        console.log("0");
        break;
}

方法3

1
2
3
4
5
6
7
8
9
var str = "abcxyz";
switch(str) {
    case (/xyz/.test(str) ? str : NaN) : //输入值为NaN时不命中
        console.log("1");
        break;
    default:
        console.log("0");
        break;
}

switch-statement-for-string-matching-in-javascript - Stack Overflow

发表于

Colors reference

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Reset = "\x1b[0m"
Bright = "\x1b[1m"
Dim = "\x1b[2m"
Underscore = "\x1b[4m"
Blink = "\x1b[5m"
Reverse = "\x1b[7m"
Hidden = "\x1b[8m"
FgBlack = "\x1b[30m"
FgRed = "\x1b[31m"
FgGreen = "\x1b[32m"
FgYellow = "\x1b[33m"
FgBlue = "\x1b[34m"
FgMagenta = "\x1b[35m"
FgCyan = "\x1b[36m"
FgWhite = "\x1b[37m"
BgBlack = "\x1b[40m"
BgRed = "\x1b[41m"
BgGreen = "\x1b[42m"
BgYellow = "\x1b[43m"
BgBlue = "\x1b[44m"
BgMagenta = "\x1b[45m"
BgCyan = "\x1b[46m"
BgWhite = "\x1b[47m"

how-to-change-node-jss-console-font-color - Stack Overflow

发表于

1、CSS HACK实现

IE 6

* html .ie6 {property:value;}

or

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

or

*:first-child+html .ie7 {property:value;}

IE 6 and 7

@media screen\9 {
    .ie67 {property:value;}
}

or

.ie67 { *property:value;}

or

.ie67 { #property:value;}

IE 6, 7 and 8

@media \0screen\,screen\9 {
    .ie678 {property:value;}
}

IE 8

html>/**/body .ie8 {property:value;}

or

@media \0screen {
    .ie8 {property:value;}
}

IE 8 Standards Mode Only

.ie8 { property /*\**/: value\9 }

IE 8,9 and 10

@media screen\0 {
    .ie8910 {property:value;}
}

IE 9 only

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
// IE9 CSS
.ie9{property:value;}
}

IE 9 and above

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}

IE 9 and 10

@media screen and (min-width:0\0) {
    .ie910{property:value\9;}
    /* backslash-9 removes ie11+ & old Safari 4 */
}

IE 10 only

_:-ms-lang(x), .ie10 { property:value\9; }

IE 10 and above

_:-ms-lang(x), .ie10up { property:value; }

or

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ie10up{property:value;}
}

IE 11 (and above..)

_:-ms-fullscreen, :root .ie11up { property:value; }

2、JS 判断 userAgent 实现

JS代码

document.documentElement.setAttribute('data-useragent',  navigator.userAgent);

CSS代码

html[data-useragent*='Chrome/13.0'] {
    ...
}

References:
css selectors - How to write a CSS hack for IE 11? - Stack Overflow

发表于

运营人员反馈了一个问题，说用安卓版掌厅客户端进某个活动页面，客户端闪退。这是很严重的问题，立马找了个安卓手机进行测试，并没有发现她报告的问题。然后找运营要了出问题的手机对照，发现出问题的手机是安卓4.4.4，而其他版本下的客户端暂时未发现问题。

只好用最笨的排除法，把页面可疑元素一个个去掉来定位。最后定位到是一个有animation的::after，去掉以后即可解决闪退的问题。

但其他页面上也有在::after上应用animation的，并未出现闪退情况。

经过在网上搜索以及在QQ群里讨论，发现问题的原因，是由于在animation里，改变的值用了rem作为单位。

特此记录。

参考 原来 CSS 这样写是会让 app 崩溃的

发表于

某后台系统项目，开发反映说页面中的input:file点击后，有时候需要数秒后才弹出选择文件的窗口。正常情况下，应该是点击后立刻就弹出；但有时候要等上三五秒。

经查网上查资料以及慢慢排查，确定是 accept=”image/*” 所导致。

改为 accept=”image/jpg,image/jpeg,image/png” 解决问题。

猜测是因为文件夹内文件太多，而浏览器需要在文件选择弹框内对文件进行比对通配符来过滤导致的。