css3的translate2D、translate3D引起android2.1焦点错位

最新推荐文章于 2024-09-13 10:00:10 发布

weixin_30439031

最新推荐文章于 2024-09-13 10:00:10 发布

阅读量106

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/anjey/archive/2012/08/07/2626727.html

版权

问题描述：

浏览器：android2.2以上机子自带浏览器
当页面中某个容器使用了translate2d或者translate3d，且该容器内又有元素使用position:absolute进行定位，那么该容器内input、textarea等控件，会出现焦点不对应（焦点错位的情况）。

解决方法：
1. 删除父容器translate2d或者translate3d样式
2. 把input、textarea控件转移到translate2d、translate3d容器外，比如使用弹出层。

(责任编辑：wiwi) 转载请注明来源于it技术参考网站： http://www.itref.cn/a/CSS/2011/0609/113.html

转载于:https://www.cnblogs.com/anjey/archive/2012/08/07/2626727.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30439031

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

CSS之3D转换（translate3d，透视perspective，旋转rotated3，transform-style)

m0_61547956的博客

04-08

7819

1、translate3d 在浏览器中，y轴正方向垂直向下，x轴正方向水平向右，z轴正方向指向外面。 z轴越大离我们越近，即看到的物体越大。z轴单位一般是px。z轴说物体到屏幕的距离。 /* transform: translate3d(100px, 100px, 100px); x,y不能省略写，不想要就写0。 2、透视perspective 透视又称视距，人的眼睛到屏幕的距离，距离视觉点越近在电脑上成像越大。根据近大远小，物体遮挡后面看不见的原理。透视写在被观察元素的父盒子上，透视越小

CSS3 之 2D转换——移动translate、旋转rotate、旋转中心点transform-origin、缩放scale

qq_43623147的博客

12-17

5687

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移translate、旋转rotate、缩放scale等效果。一、二维坐标系 2向右和向下变大二、2D转换之移动translate 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。 1. 语法 transform: translate(x,y); //或者分开写 transform:translateX(n); transform:translateY(n); 2. 重点定义2D转换中.

参与评论您还未登录，请先登录后发表或查看评论

translate3d在安卓无效的问题

linxiaotao1987的博客

05-10

1960

需要实现这样一个需求，滑动手机屏幕切换图片。手指移动的时候下一张图片跟着移动。手指离开的时候下一张图片移动到屏幕中央。实现的过程有这样一个片段：手指移动的时候下一张图片的transform：translate3d(0,[手指移动距离px],0); 手指离开的时候下一张图片的transform：translate3d(0,-100%,0); 这样导致translate的单位从

通过 translate 实现垂直居中与 rotate 的冲突——分析与解决方案

Jay的博客

05-05

2038

最近，自己尝试使用input+ul去模拟实现select。因为，使用原生的select有着诸多不便。而且，模拟实现select看上去也并不是很困难的事情。但是呢！当你信心满满的时候，往往就会打脸之时。确实，功能、效果、样式都很会实现了。可是，下三角的旋转却出现了问题。因为我比较喜欢通过position: absolute去实现垂直居中。这次我也是这么做了。然后我就悲催的发现，下三角的旋转并不是根...

transform属性影响fixed定位

weixin_45229447的博客

09-30

1769

偶然的机会发现fiexd定位会受到transform的影响，以下为自己弄的小案例当外部元素没有transform属性时 -----css部分----- <style> *{ padding: 0; margin: 0; } .transform{ width: 100px; height: 100px; background: rgb(196, 196, 196); /* transform:tra

translate元素中的Position: fixed

u010552788的专栏

09-05

2068

最近写奇葩的布局遇到了奇葩的问题，想给一个父元素加上translate3d来实现GPU加速，发现加上tranlate3d之后，fixed定位的自元素不是相对于viewport了，二是相对于有translate3d的父元素。查了查fixed的定义，按照标准定位确实是相对于viewport - https://www.w3.org/TR/css-position-3/#fixed-pos Fix

【微信公众号 H5 mui】mui 开发公众号网页出现点击触发区域错位问题 mui radio 点击muijs报错（记录）

悟空—

03-24

486

遇到此问题及微信开发者工具问题使用真机测试将不会出现此问题被这个给坑了做一下记录使用场景微信开发者工具公众号网页测试处理方法引用mui.min.js 之前先<script>window.FastClick = true;</script> 就可以了正确： <script>window.FastClic...

html5+css3

小噗的博客

01-05

440

html5+css3

CSS3-3D转换

weixin_49455047的博客

11-26

2922

目录 1.1三维坐标系 1.2 3D移动translate3d 1.3 透视perspective 1.4 3D旋转 rotate3d 1.5 3D呈现 transform-style 2.1两面翻转盒子案例 3D导航栏旋转木马有什么特点近大远小物体后面遮挡不可见 1.1三维坐标系 x轴：水平向右注意：x右边是正值，左边是负值 y轴：水平向下注意：y下边是正值，上边是负值 z轴：垂直屏幕注意：往外面是正值，往里面是负值 .

CSS3新增属性——过渡和动画（2D属性，3D动画）

m0_53619602的博客

06-07

3059

目录CSS3一、过渡1. 属性2. 花费时间3. 运动曲线4. 何时开始二、2D属性 2. translate（移动）2. rotate（旋转）3. scale（缩放）4. transform-origin（转换中心点）综合写法三、动画 1. 动画的使用1）.定义动画（keyframes）2）元素使用动画 2. 动画序列3. 动画属性4. 动画属性简写四、3D动画 1. 三维坐标系 2. 3D移动 translate3d3. 透视 perspective 4. 3D旋转5. 3D呈现（tran

CSS3——3D变形 transform

流楚丶格念的博客

07-15

4673

3D变形(CSS3) transform 2d x y 3d x y z 左手坐标系伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图 CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图简单记住他们的坐标： x左边是负的，右边是正的 y 上面是负的，下面是正的 z 里面是负的，外面是正的 rotateX() 就是沿着 x 立体旋转.

关于left,top和translate2d以及translate3d性能问题的详讲

南宫的CG世界

05-30

1379

left和top的性能高还是translate2d的性能高？听说translate3d的性能最高？

transform 引起的position:fixed和absolute失效问题

weixin_34358092的博客

05-08

696

Either way, here’s where things got really troublesome for me: a transformed element creates a containing blockeven for descendants that have been set toposition: fixed. In other words, the contai...

Dart 3.5更新对普通开发者有哪些影响？

developer_laoliu的博客

09-10

1163

Dart 3.5 站在整个Dart语言的发展路径上看不是特别重要的版本。但是未来比较重大的变化在这个版本上都有体现，因此可以让我们对整个语言的发展趋势有清晰的了解。1、完善面向底层系统的兼容能力Dart在持续补完语言层面和运行平台间的互操作能力，包括C、Java、Kotlin、Objective-C 和 Swift这样的系统级平台语言，也包括web上的js互操作。

如何集成Android平台GB28181设备接入模块？

乐学吧

09-09

1428

大牛直播SDK的Android平台GB28181设备接入模块在适用场景、音视频能力、定位与通信、数据管理、安全性与稳定性、配置与扩展性以及集成与维护等方面均表现出显著的优势。这些优势使得该模块在视频监控、巡检抢修、远程指挥等多个领域具有广泛的应用前景和重要的应用价值。SmartGBD可用于多种场景，包括但不限于执法记录仪、智能安全帽、智能监控、智慧零售、智慧教育、远程办公、明厨亮灶、智慧交通、智慧工地、雪亮工程、平安乡村、生产运输、车载终端等。这种广泛的适用性使其能够满足不同行业和领域的需求。

android kotlin 基础复习继承 inherit

花花鱼的专栏

09-09

619

android kotlin 基础复习继承 inherit

【App】

票票的博客

09-11

226

App：React Native、

Android内存知识总结