- 当前 Bug 的表现(可附上截图)
这是在iOS上的表现
主要问题:
1、`ransform:rotate` 不起作用;
2、设置了高度100%后,在开发者工具正常,但是在客户端下边没有100%,差了大约1px的高度
- 预期表现
这是在微信开发者工具上的表现
-代码片段
##WXML
<camera device-position=“back” flash=“off” binderror=“error”>
<cover-view class=“cover-container”>
<cover-view class=“cover-frame-top”>
<cover-view class=“cover-cancel” bindtap=“cancelAction”>取消</cover-view>
</cover-view>
<cover-view class=“cover-frame-left”></cover-view>
<cover-view class=“cover-frame-right”>
</cover-view>
<cover-view class=“cover-frame-bottom”>
<cover-view class=“cover-catch” bindtap=“catchAction”>拍照</cover-view>
</cover-view>
<cover-view class=“cover-catcher”></cover-view>
<cover-view class=“cover-help”>请将证件对准方框,调整光线避免反光</cover-view>
</cover-view>
</camera>
##WXSS
.cover-cancel {
position: absolute;
bottom: 10%;
left: 50%;
margin-left: -25px;
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 25px;
border: 2px solid #ffffff;
color: #ffffff;
text-align: center;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); /* Opera */
}
.cover-catch {
position: absolute;
top: 10%;
left: 50%;
margin-left: -25px;
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 25px;
border: 2px solid #ffffff;
color: #ffffff;
text-align: center;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); /* Opera */
}
.cover-help {
display: block;
position: absolute;
top: 49%;
right:-42%;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 17px;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); /* Opera */
}