Question

我使用-webkit-animation来制作菜单旋转时的图标和悬停时的图标。如果单击它，则会出现一个带有模糊文本的下拉菜单。直到我将光标从图标上移开才能使文本恢复正常。现在这对我来说很奇怪，因为动画导致了单独元素中的模糊，我不明白为什么。

所以我有类似的东西。

<li class="drop">
    <a href="#" class="drop-toggle">
        <span class="nav-icon settings"></span>
    </a>
    <div class="drop-menu">
        <ul role="menu">
        ....my list with text

然后，我就像这样进行图标旋转。

.nav-icon {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    background-image: url("images/menu-sprite.png");
}
.nav-icon.settings {
    background-position: 0 0;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg);}
    100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg);}
    100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
    0% { -o-transform: rotate(0deg);}
    100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin {
    0% { -ms-transform: rotate(0deg);}
    100% { -ms-transform: rotate(360deg);}
}
.nav-icon.settings:hover {
    -webkit-animation: spin 2.7s infinite linear;
    -moz-animation: spin 2.7s infinite linear;
    -o-animation: spin 2.7s infinite linear;
    -ms-animation: spin 2.7s infinite linear;
}

无论出于何种原因，文字在悬停时都会模糊不清。我在IE和Mozilla中测试过，它只能在Chrome中运行正常。

Answer 1

尝试将此css添加到模糊文本中（我假设它是示例中的ul元素）。如果您的列表包含锚点，请确保您将其作为目标。否则，.drop-menu ul li { -webkit-transform: translateZ(0px); }应该没问题。

所以要么......

.drop-menu ul li a {
    -webkit-transform: translateZ(0px);
}

...或

Mat_<double> IterativeLinearLSTriangulation(Point3d u,    //homogenous image point (u,v,1)
    Matx34d P,          //camera 1 matrix
    Point3d u1,         //homogenous image point in 2nd camera
    Matx34d P1          //camera 2 matrix
    ) {

    double wi = 1, wi1 = 1;
    Mat_<double> X(4, 1);



    for (int i = 0; i < 10; i++) { //Hartley suggests 10 iterations at most
        Mat_<double> X_ = LinearLSTriangulation(u, P, u1, P1);
    X(0) = X_(0); X(1) = X_(1); X(2) = X_(2); X(3) = 1.0;
        //recalculate weights
        double p2x = Mat_<double>(Mat_<double>(P).row(2)*X)(0);
        double p2x1 = Mat_<double>(Mat_<double>(P1).row(2)*X)(0);

        //breaking point
        if (fabsf(wi - p2x) <= EPSILON && fabsf(wi1 - p2x1) <= EPSILON) break;

        wi = p2x;
        wi1 = p2x1;

        //reweight equations and solve
        Matx43d A((u.x*P(2, 0) - P(0, 0)) / wi, (u.x*P(2, 1) - P(0, 1)) / wi, (u.x*P(2, 2) - P(0, 2)) / wi,
            (u.y*P(2, 0) - P(1, 0)) / wi, (u.y*P(2, 1) - P(1, 1)) / wi, (u.y*P(2, 2) - P(1, 2)) / wi,
            (u1.x*P1(2, 0) - P1(0, 0)) / wi1, (u1.x*P1(2, 1) - P1(0, 1)) / wi1, (u1.x*P1(2, 2) - P1(0, 2)) / wi1,
            (u1.y*P1(2, 0) - P1(1, 0)) / wi1, (u1.y*P1(2, 1) - P1(1, 1)) / wi1, (u1.y*P1(2, 2) - P1(1, 2)) / wi1
            );
        Mat_<double> B = (Mat_<double>(4, 1) << -(u.x*P(2, 3) - P(0, 3)) / wi,
            -(u.y*P(2, 3) - P(1, 3)) / wi,
            -(u1.x*P1(2, 3) - P1(0, 3)) / wi1,
            -(u1.y*P1(2, 3) - P1(1, 3)) / wi1
            );

        solve(A, B, X_, DECOMP_SVD);
        X(0) = X_(0); X(1) = X_(1); X(2) = X_(2); X(3) = 1.0;
    }

    return X;
}

Answer 2

我遇到了类似的问题，我最终选择了一个选择文本并应用的选择器：

li p {transform:none}

希望这有帮助！

Css webkit动画导致在单独元素里面的被弄脏的文本

2 个答案: