做有态度的前端团队

网易FEG前端团队

3D样式在“部分真机”的遮挡原因(跟z-index无关),导致点击不上绑定点击事件的元素

最近做的一个专题项目(梦幻西游-阳光魅力榜),遇到一个3D效果样式导致的问题附上项目地址:http://my.163.com/2016/ygmlb/m/index.html

大概描述下问题:

移动端 3D效果样式(3D翻转效果)导致在“部分真机”上,元素绑定的click事件点击无效,并不是js绑定点击事件方法bug或者不支持的原因,而是点击元素被遮挡了(谷歌浏览器所有模拟机和其他真机测试没问题,在“三星某个型号手机” 和“华为P7手机”绑定点击事件元素被遮挡了。),遮挡问题跟z-index层次高低无关。

3D翻转效果HTML部分代码简化如下:

    <div class="module">    
        <div class="info">
            <a class="l-btn" href="javascript:void(0);">点击这里翻转</a>
                内容前面        
        </div>
        <div class="info-desc">
            <a class="l-btn" href="javascript:void(0);">点击这里返回</a>
            背面       
        </div>
    </div>

3D翻转效果LESS部分样式(未修复前)简化如下:

    .module{
        width:6.55rem;
        height:7.59rem;
        perspetive:10rem;
        -webkit-perspective:10rem;
        position:relative;    
        .info, .info-desc{
            width:6.55rem;
            height:7.59rem;
            position:absolute;
            top:0;
            left:0;
            backface-visibility:hidden;
            transition:all 0.6s ease-out;
            -webkit-transition:all 0.6s ease-out;
            transform-style:preserve-3d;
            -webkit-transform-style:preserve-3d;
        }
        .info{
           z-index:2;
           transform:rotateY(0deg);
           -webkit-transform:rotateY(0deg);
           opacity:1;     
        }
        .info-desc{
            z-index:1;
            transform:rotateY(-180deg);
            -webkit-transform:rotateY(-180deg);
            opacity:0;
        }
        &.on{
            .info{
                transform:rotateY(180deg);
                -webkit-transform:rotateY(180deg);
                z-index:1;
                opacity:0;        
            }
            .info-desc{
                transform:rotateY(0deg);
                -webkit-transform:rotateY(0deg);
                z-index:2;
                opacity:1;       
            }
        }
        .l-btn{
            position:absolute;
            width:0.84rem;
            height:0.84rem;       
            top:3.3rem;
            left:5.6rem;
            z-index:3;
            display:block;
            
        }   
    }

解决问题曲折过程(可略过不看):

1、一开始考虑到是不是被遮挡了,检查了一遍样式,样式代码层次高低,按道理正常啊,不过还是调整层次测试了一遍,问题依然存在

2、经过第一步测试后,猜想应该不是层遮挡原因吧,然后想应该是js方面的bug,想不通,于是求助小伙伴,如下处理:
点击事件简化代码:

    $(".module .l-btn").live("click",function(){ 
         alert(1); 
    });

处理:
a、猜想会不会zepto(mixNIE).last.js,不支持live绑定?然后更改绑定事件写法,问题依然存在,如下:

        $(document).on("click",".module .l-btn",function(e){
            alert(1); 
        });

b、是不是跟页面没引入event.js有关?于是引入,问题依然存在..
然后: 更改点击对象,它的外层module作为点击对象,这样子点击有效。代码如下:

           $(document).on("click",".module",function(e){    
               alert(1); 
           });

c、猜想不是绑定事件方法的原因,然后返回检查元素层次,是不是被遮挡,检查元素之间z-index按道理没问题呀,不过还是试图改下加大z-index,测试后问题依然存在..

d、然后猜想,是不是3D效果原因导致的,于是更改样式如下: 注释掉如下几个3D辅助样式,但问题依然存在:

        perspective:10rem;
        -webkit-perspective:10rem; 
        transform-style:preserve-3d;
        -webkit-transform-style:preserve-3d;

...等等反复调试,问题依然存在。。
时间已经很晚啦,小伙伴有其他紧急的事要处理,然后暂时放下。。

3、第二天一大早,求助另一小伙伴。

处理:
a、更改z-index
b、更改点击对象为它的外层module
c、更改代码结构,把点击元素移外层,并调整z-index值
如下更改结构简化代码:

            <div class="module"> 
               <a class="l-btn" href="javascript:void(0);">点击这里翻转(返回)</a>   
               <div class="info">
                    内容前面        
                </div>
                <div class="info-desc">
                    背面       
                </div>
            </div>

...等等反复调试,问题依然存在。。

终于终于小伙伴找到解决方法了(*^_^*)~~

解决问题方法

3D效果的元素样式添加visibility样式,关键:visibility:hidden;
部分样式简化代码如下:

    .module{
    
        .info, .info-desc{
        }
        .info{
             z-index:2;
            transform:rotateY(0deg);
            visibility:visible; 
         }
        .info-desc{
            z-index:1; 
            transform:rotateY(-180deg);
            visibility:hidden; /*关键样式*/  
        }
        &.on{
            .info{       
                z-index:1; 
               transform:rotateY(180deg);
              visibility:hidden;        
            }
            .info-desc{
                z-index:2; 
                  transform:rotateY(0deg);
                  visibility:visible; 
            }
        }
        .l-btn{
        }   
    }

最后,非常感谢这两位小伙伴"槟爷"和"强哥"的鼎力帮助!

手机阅读请扫描下方二维码:

none

已有 1 条评论

  1. 这种3D转换,还有一种思路就是两个翻转的图层都是翻转90度,正面是正常的显示,反面的初始状态是已经翻转了90度。当点击翻转的时候,正面先翻转90度,当到了90度那一瞬间,反面再从90度的值开始翻转。这样估计就不会有两个面重叠的问题了。例子可以看下百将行移动官网的新闻交互效果:http://bjx.163.com/m/index.html

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif