Html 在手机上显示两个字段的可交换登录表单

我的登录页面有问题，在我的手机上可以看到：

基本上，它似乎显示了可翻转登录的两面，它应该只显示一面，当我输入文本时，它也被翻转了（因此文本变成RTL而不是LTR）

在桌面上，这是正常的，如下所示：

请点击此处：

总的来说，这是一个非常恼人的问题，我不知道它来自何方，代码如下

正文{
保证金：0；
颜色：#6a6f8c；
背景：#c8c8c8；
字体：600 16px/18px“开放式Sans”，无衬线；
}
*,
：之后，
：之前{
框大小：边框框
}
.clearfix:之后，
.clearfix:以前{
内容：''；
显示：表格
}
.clearfix:之后{
明确：两者皆有；
显示：块
}
a{
颜色：继承；
文本装饰：无
}
.登录包装{
宽度：100%；
保证金：自动；
最大宽度：525px；
最小高度：670px；
位置：相对位置；
背景：url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg)无重复中心；
盒影：0 12px 15px 0 rgba（0,0,0,24），0 17px 50px 0 rgba（0,0,0,19）；
}
.登录html{
宽度：100%；
身高：100%；
位置：绝对位置；
填充：90px 70px 50px 70px；
背景：rgba（40,57,101,9）；
}
.login html.sign-in htm，
.login html.sign-up htm{
排名：0；
左：0；
右：0；
底部：0；
位置：绝对位置；
变换：旋转（180度）；
背面可见性：隐藏；
过渡：全部。4s线性；
}
.login html.登录，
.登录html.注册，
.登录表单.组.检查{
显示：无；
}
.login html.tab，
.登录表单.组.标签，
.登录表单.组.按钮{
文本转换：大写；
}
.login.html.tab{
字体大小：22px；
右边距：15px；
垫底：5px；
利润率：0 15px 10px 0；
显示：内联块；
边框底部：2倍纯色透明；
}
.login html.登录：选中+.tab，
.登录html.注册：选中+.选项卡{
颜色：#fff；
边框颜色：#1161ee；
}
.登入表格{
最小高度：345px；
位置：相对位置；
透视图：1000px；
变换样式：保留-3d；
}
.login form.group{
边缘底部：15px；
}
.登录表单.组.标签，
.login form.group.input，
.登录表单.组.按钮{
宽度：100%；
颜色：#fff；
显示：块；
}
.login form.group.input，
.登录表单.组.按钮{
边界：无；
填充：15px 20px；
边界半径：25px；
背景：rgba（255,255,255,1）；
}
.登录表单.组输入[数据类型=“密码”]{
文本安全：圆圈；
-webkit文本安全性：圆圈；
}
.登录表单.组.标签{
颜色：#aaa；
字体大小：12px；
}
.登录表单.组.按钮{
背景：#1161ee；
}
.登录表单.组标签.图标{
宽度：15px；
高度：15px；
边界半径：2px；
位置：相对位置；
显示：内联块；
背景：rgba（255,255,255,1）；
}
.登录表单.组标签.图标：在，
.登录表单.组标签.图标：后{
内容：''；
宽度：10px；
高度：2倍；
背景：#fff；
位置：绝对位置；
转换：所有.2输入输出0；
}
.登录表单.组标签.图标：之前{
左：3px；
宽度：5px；
底部：6px；
变换：缩放（0）旋转（0）；
}
.登录表单.组标签.图标：后{
顶部：6px；
右：0；
变换：缩放（0）旋转（0）；
}
.登录表单.组.检查：选中+标签{
颜色：#fff；
}
.登录表单.组.检查：选中+标签.图标{
背景：#1161ee；
}
.login form.group.check:checked+label.icon:before{
变换：缩放（1）旋转（45度）；
}
.login form.group.check:checked+label.icon:after{
变换：缩放（1）旋转（-45度）；
}
.login html.登录：选中+.tab+.sign up+.tab+.login表单.sign-in htm{
变换：旋转（0）；
}
.login html.sign-up:选中+.tab+.login表单.sign-up htm{
变换：旋转（0）；
}
.hr{
高度：2倍；
利润率：60px0.50px0；
背景：rgba（255,255,255,2）；
}
.foot lnk{
文本对齐：居中；
}

登录
注册
{{csrf_field（）}}
用户名
密码
让我登录
{{csrf_field（）}}
用户名
密码
重复密码
电子邮件地址
已经是会员了吗？

这应该可以解决您的问题。问题是Firefox 10+和IE 10+支持

背面可见性

，没有前缀Opera（眨眼后，15+）、Chrome、Safari、iOS和Android都需要

-webkit背面可见性

所以，试着插入

-webkit backface visibility:hidden

，看看它是否可以工作

.login-html .sign-in-htm,
.login-html .sign-up-htm {          
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

正文{
保证金：0；
颜色：#6a6f8c；
背景：#c8c8c8；
字体：600 16px/18px“开放式Sans”，无衬线；
}
*，：之后，：之前{框大小：边框框}
.clearfix:after、.clearfix:before{content:''；display:table}
.clearfix:在{clear:both；display:block}之后
a{颜色：继承；文本装饰：无}
.登录包装{
宽度：100%；
保证金：自动；
最大宽度：525px；
最小高度：670px；
位置：相对位置；
背景：url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg)无重复中心；
盒影：0 12px 15px 0 rgba（0,0,0,24），0 17px 50px 0 rgba（0,0,0,19）；
}
.登录html{
宽度：100%；
身高：100%；
位置：绝对位置；
填充：90px 70px 50px 70px；
背景：rgba（40,57101,9）；
}
.login html.sign-in htm，
.login html.sign-up htm{
排名：0；
左：0；
右：0；
底部：0；
位置：绝对位置；
变换：旋转（180度）；
背面可见性：隐藏；
-webkit背面可见性：隐藏；
过渡：全部。4s线性；
}
.login html.登录，
.登录html.注册，
.登录表单.组.检查{
显示：无；
}
.login html.tab，
.登录表单.组.标签，
.登录表单.组.按钮