Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug starting minimized and 1px offset in Chrome #33

Open
kilobajt opened this issue Jul 29, 2021 · 3 comments
Open

Bug starting minimized and 1px offset in Chrome #33

kilobajt opened this issue Jul 29, 2021 · 3 comments
Labels
bug Something isn't working

Comments

@kilobajt
Copy link

kilobajt commented Jul 29, 2021

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
Copy link
Collaborator

Thanks, will try to pick this up one day.

@rikschennink rikschennink added the bug Something isn't working label Nov 20, 2021
@artt
Copy link

artt commented Dec 23, 2021

Any update on this issue? Thanks a lot!

image

@sokai
Copy link

sokai commented Feb 16, 2022

@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 … ;-))

kamilaindustrymedia added a commit to kamilaindustrymedia/flip that referenced this issue Apr 7, 2022
kamilaindustrymedia added a commit to kamilaindustrymedia/flip that referenced this issue Apr 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants