Safari中的奇怪JavaScript错误,在chrome中可以正常工作

时间:2018-07-03 19:05:42

标签: javascript jquery html css cross-browser

我正在建立一个网站,但在Safari中遇到了变量定义问题。该代码可以在Chrome中正常运行。

我想做的是在截断某个元素时获取其高度(使用-webkit-line-clamp),以便稍后可以将其高度动画化为完整的值。我现在正在做的是将-webkit-line-clamp设置为未设置(初始值为1),获取元素的高度,将-webkit-line-clamp返回1,然后为max-height设置动画。相关代码如下,并在重要行上加上注释。

$(".cd-timeline__block.js-cd-block").hover(function(){
    $(this).children(":last").children("h2").css("opacity", "1");
    var ele = $(this).children(":last").children(".content-wrapper-desc").children(":first");
    ele.css({"max-height": "max-content", "visibility": "hidden", "transition": "250ms", "-webkit-line-clamp": "unset", "opacity": "1"});
    var temp_height = ele.height();
    debugger; //in the debugger, ele.height() returns the correct value of the element's full height
    console.log(temp_height); //the console.log outputs the height of the truncated element
    ele.css({
        'position': 'relative',
        'visibility': 'inherit',
        'max-height': '2rem',
        'display': '-webkit-box',
        'transition': '250ms !important',
       '-webkit-line-clamp': 'unset',
    });
    setTimeout(function(){
        console.log(temp_height);
        ele.css("max-height", temp_height+"px"); //setTimeout with 1ms is to ensure that the animation runs. not entirely sure why this is necessary, but trial and error proved that it does.
    }, 1);

}, function(){
    $(this).children(":last").children("h2").css("opacity", "0.3");
    ele = $(this).children(":last").children(".content-wrapper-desc").children(":first");
    ele.css({"max-height": "2rem",  "-webkit-line-clamp": "unset", "opacity": "0.4"});
    setTimeout(function(){
        ele.css({"-webkit-line-clamp": "1"});
    }, 250);
});

这是我在调试器中看到的内容

代码在这里:

enter image description here

当我进入控制台并尝试找出问题时,这就是我得到的:

enter image description here

0 个答案:

没有答案