移动端页面小bug

滑动时页面警告

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

解决方法

* {
-ms-touch-action: pan-y;
touch-action: pan-y;
}

text-align-last safari 不支持的解决办法

• 姓名


• 身份证号码

.item-title {
display: block;
width: 1.2rem;
height: 0.54rem;
line-height: 0.54rem;
margin-right: 0.4rem;
text-align-last: justify;
text-align: justify;
overflow: hidden;
}
.item-title:after {
content: '';
width: 100%;
display: inline-block;
overflow: hidden;
height: 0;
}


重点在于给span设置高度和伪元素


iOS微信去掉底部返回横条问题

document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
WeixinJSBridge.call('hideToolbar');
});

input框自动填充内容背景颜色为黄色

input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset;}


设置letter-spacing文字不居中

设置letter-spacing间距和padding-left等值即可

.list-view-item .name {
padding-left: 0.8rem;
font-size: 0.32rem;
letter-spacing: 0.8rem;
text-align: center;
}


安卓端底部按钮被软键盘顶上去挡住输入框



function intoView(el) {
setTimeout(function() {
el.scrollIntoViewIfNeeded();
}, 500);
}


实现0.5px边框在华为手机不显示问题

我的写法是这样的

.border:before {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #ddd;
}


发现这个写法在其他手机没问题唯独在华为手机显示不出

-webkit-transform-origin: 0 0;
transform-origin: 0 0;


把这个写上即可解决