Question

我已经制作了一个模拟时钟，至少在我看来，这是在chrome和IE中使用javascript函数旋转的，它运转良好，但至少在我看来，但是在Firefox中，分针抽动是我不知道的原因，我正在发布.js文件和.html文件，因为我认为.css文件不相关。

JS：

var hourHand = document.getElementById('hourHand');
var minuteHand = document.getElementById('minuteHand');

function initClock(){
var date = new Date();
var hour = date.getHours() % 12;
var minute = date.getMinutes();
var second = date.getSeconds();

var hourDeg =  (hour * 30) + (0.5 * minute);
var minuteDeg = (minute * 6) + (0.1 * second);

hourHand.style.transform = 'rotate(' + hourDeg + 'deg)';
minuteHand.style.transform = 'rotate(' + minuteDeg + 'deg)';


setTimeout(initClock, 1000);
};

initClock();

HTML：

 <div>
        <div class="levo">
            <img id="slikaLevo" src="TIDlevo.png">
        </div>
        <div class="kontejner">
            <div class="clock">
                <img class="hands" src="TidClockFace.png">
                <img id="hourHand" class="hands-cl" src="velika.png">
                <img id="minuteHand" class="hands-cl" src="mala.png">
            </div>
        </div>
        <div class="desno">
            <img class="desnoSlika" src="TIDdesno.png">
        </div>
    </div>

我正在提供一个JSFiddle链接，以便你们可以看到我在说什么： https://jsfiddle.net/MicroDev92/8j1rteqd/19/

这可以解决吗？

Answer 1

这是因为Firefox如何平滑转换，以避免混淆。不是立即完成，而是经过短暂的延迟。

如this article中所述，您可以通过向对象添加border: 1px solid transparent来解决此问题。这将立即应用别名，以避免出现抽搐。

var hourHand = document.getElementById('hourHand');
var minuteHand = document.getElementById('minuteHand');

function initClock(){
	var date = new Date();
	var hour = date.getHours() % 12;
	var minute = date.getMinutes();
	var second = date.getSeconds();
	
	var hourDeg =  (hour * 30) + (0.5 * minute);
	var minuteDeg = (minute * 6) + (0.1 * second);
	
	hourHand.style.transform = 'rotate(' + hourDeg + 'deg)';
	minuteHand.style.transform = 'rotate(' + minuteDeg + 'deg)';

	
	setTimeout(initClock, 1000);
};

initClock();

.levo{
    vertical-align:top;
    width: 27%;
    overflow: hidden;
    display: inline-block;
}
#slikaLevo{
    height: 100%;
    width: 100%;
}
.kontejner{
    position: relative;
    display: inline-block;
    width: 16.7%;
    height:100%;
    padding:0px;
}
.clock{
    width: 100%;
    height: 100%;
    position:relative;
    display:inline-block;

}
.hands{
	top:0;
	left:0;
    width: 100%;
    height: 100%;
    position:relative;
}
.hands-cl {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 1px solid transparent;
}
.desno {
    vertical-align: top;
    width: 52.2%;
    height: 100%;
    overflow: hidden;
    display: inline-block;
}
.desnoSlika{
    width: 100%;
    height: 100%;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="testiranjeSata.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div class="header-logo">
        <div>
            <div class="levo">
                <img id="slikaLevo" src="https://image.ibb.co/jXRDCT/TIDlevo.png">
            </div>
            <div class="kontejner">
                <div class="clock">
                    <img class="hands" src="https://image.ibb.co/kCnLsT/Tid_Clock_Face.png">
                    <img id="hourHand" class="hands-cl" src="https://image.ibb.co/mKv6XT/velika.png">
                    <img id="minuteHand" class="hands-cl" src="https://image.ibb.co/mCyRXT/mala.png">
                </div>
            </div>
            <div class="desno">
                <img class="desnoSlika" src="https://image.ibb.co/bx0Je8/TIDdesno.png">
            </div>
        </div>
    </div>
    
    <script type="text/javascript" src="script.js"></script>
</body>



</html>

Firefox旋转变换的抽搐问题

1 个答案: