Bug starting minimized and 1px offset in Chrome

[kilobajt]

I tried to integrate your component into our web application and I encountered two bugs while testing. I managed to fix them and I provide fixes below. Line numbers are related to https://github.com/pqina/flip/blob/master/dist/flip.js

Bugs and fixes:

1. When started minimized timer wouldn't start. I discovered there's a problem with sleepIntervalOffset being null and this happens because of code on line #4155 (if(isDocumentHidden()...) which should really be executed after line #4161, so after calculating tickExpectedTime. Fixed lines:

   4154... 4161:

   // the moment the timeout should end
   tickExpectedTime = now$2() + interval;
   
   // stop here if document is hidden at start time
   if (isDocumentHidden()) {
       didHideDocument();
       return;
   }

2. 1px offset when drawing, style == flip. I discovered it's related to css transform being rotateX(-360) - see line #658. Fix is easy: there's no 1px offset if you set degrees to 0 instead of -360 and you also add translateZ and scale so the fixed two lines are as follows:

   657: this._front.style.transform = 'rotateX(' + degrees + 'deg) translateZ(0) scale(1.0, 1.0)';

   658: this._back.style.transform = 'rotateX(' + (-180 + degrees) == -360 ? 0 : (-180 + degrees) + 'deg) translateZ(0) scale(1.0, 1.0)';

[rikschennink]

Thanks, will try to pick this up one day.

[artt]

Any update on this issue? Thanks a lot!

[sokai]

@artt I don't know if you have the same problem like @kilobajt …(?)

Because: I also saw that 1px offset and fixed it with a even font-size.

Example with 1px offset:

.tick {
    font-size: 1.5em;
}

Fixed example:

.tick {
    font-size: 1.6em;
}

(Maybe it's more a workaround than a solution, but it works … ;-))