djgrant / heidelberg Goto Github PK

Image having "dark areas" when chrome has page zoom between 100 and 200% and you paginate.

If you are in 100%, or 200%, that doesn't happen.

A number of people report similar problems with chrome, but seems like the solution required to fix it is already applied to the code:

https://www.google.ie/search?q=chrome+image+rendering+problem+on+transition&oq=chrome+image+rendering+problem+on+transition&aqs=chrome..69i57.8566j0j7&sourceid=chrome&ie=UTF-8

-webkit-backface-visibility: hidden;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);

Is there any other way to avoid this problem?

I've made this video to make it clearer on the issues we have:

https://youtu.be/uDZ6fypNlRY

Thanks

First of all, thank you for your awesome work !

I discovered a tiny bug.
If you programmatically turning a page right after init like this:

var book1 = new Heidelberg($('#Heidelberg-example-1'), {
  previousButton: $('#previous'),
  nextButton: $('#next'),
  hasSpreads: true,
  onPageTurn: function(el, els) {
    console.log('Page turned');
  },
  onSpreadSetup: function(el) {
    console.log('Spread setup');
  }
});

book1.turnPage(5);

Page 5 is active, but webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend events wont be triggered - See file heidelberg.js line 207

els.pagesAnimating.on('webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend', function () {
  els.pagesAnimating.removeClass('is-animating');
  els.pagesActive.removeClass('was-active');
}.bind(document));

and you will have unexpected 'is-animating' pages.

As a result, if you keep turning the pages 'forward', the left page will stay the same.
My goal was to init the book and open it at a given page. I guess, It could be done directly by adding an option to Heidelberg and update the code around line 80-88. But I am not sure it's a wanted behavior.

if(!options.canClose) {
  var coverEl = $('<div />').addClass('Heidelberg-HiddenCover');
  el.prepend(coverEl.clone());
  el.append(coverEl.clone());
  els.pages.eq(0).add(els.pages.eq(1)).addClass('is-active');
}
else {
  els.pages.eq(0).addClass('is-active');
}

I was hoping to come with a pull request to fix this, but I don't have it yet. I was hoping to have some feedbacks and advices from you.

All the best !

Hi,

I am trying to integrate your library in a Angular2 project. I am using npm, webpack and typescript. I am pretty new to all of this and I am not able to do so.

If you are not familiar with Angular2 I don't think it's a issue just a how to in TypeScript/RequireJS would be enough for me to manage.

Thanks !

I can't take a screenshot because my laptop can't cope. Guessing this is probably wontfix anyway.

I've been trying to fix this today, but still have no idea why it is happening.

When rotating a mobile device when viewing heidelberg, it locks up for a while (six seconds on my iPhone 5, like 30 seconds on an Amazon Fire Phone). Discovered it locally but it happens on the gh-pages site too. It doesn't happen on the lostmy.name site, which is confusing—I have no idea why it works. It works okay on my iPhone 6 until I put too many images in it.

Chrome latest. When pressing jump to page 9, the image on the right turns into the right page of the page previous to page 9, instead of what it was when I clicked go to page 9.

I am so bad at explaining stuff :(

Click jump to page 9 and watch a muddy hippo appear from nowhere and be flipped to the left!