Firefox旋转变换的抽搐问题

Question

I have made an analogue clock which rotates using javascript function in chrome and IE it works nicely, to my eye at least, but in firefox the minute hand twitches for reason not known to me I am posting .js file and .html file because I reckon that the .css file is not relevant. 我已经制作了一个模拟时钟，至少在我看来，可以在chrome和IE中使用javascript函数进行旋转，但是至少在我看来，但是在firefox中，分针抽动是我不知道的原因，我正在发布.js文件和.html文件，因为我认为.css文件不相关。

JS: 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: 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>

I am providing a JSFiddle link so You guys can see what I'm talking about: https://jsfiddle.net/MicroDev92/8j1rteqd/19/ 我正在提供一个JSFiddle链接，以便你们可以看到我在说什么： https ：//jsfiddle.net/MicroDev92/8j1rteqd/19/

is this something that can be fixed? 这是可以解决的吗？

Answer 1

This is because how Firefox smooths transforms, in order to avoid aliasing. 这是因为Firefox如何平滑转换，以避免混淆。 It's not something done immediately but after a short delay. 这不是立即完成的事情，而是短暂的延迟。

As mentioned in this article , you can fix this by adding border: 1px solid transparent to the object. 如本文所述，您可以通过添加border: 1px solid transparent对对象border: 1px solid transparent来解决此问题。 This will apply aliasing immediately, to avoid having that twitch. 这将立即应用别名，以避免出现抽搐。

 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 个解决方案

解决方案1
0 2018-07-07 18:18:11

Firefox旋转变换的抽搐问题

问题描述

1 个解决方案

解决方案1 0 2018-07-07 18:18:11

解决方案1
0 2018-07-07 18:18:11