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

Already on GitHub? Sign in to your account

Non-WebKit browsers don't get gradients. #3

andreasbovens opened this Issue Feb 8, 2012 · 12 comments


None yet
5 participants

Non-WebKit browsers don't get to see the gradient-based page curve effect when flipping pages.

https://github.com/blasten/turn.js/blob/master/turn.js#L899 and https://github.com/blasten/turn.js/blob/master/turn.js#L907 are most likely the culprit: there's only -webkit- prefixes there. It would be nice to add -ms-, -o-, -moz- as well.


blasten commented Feb 8, 2012

You right, a new version will add the gradients for all the browsers, this version is coming next week!

Great to hear that! Let me know if you need any help :)

mdtanner commented Mar 8, 2012

Has this issue been resolved yet?
I downloaded the latest turn.js yesterday, but the non-webkit/HTML5 browsers still didn't show the gradient page curve.

Thanks ... the turn.js library works amazing and looks impressive!

tommcg commented Mar 9, 2012

No gradient yet. Any word on the update? Really like this but want it to awesome in all browsers!


blasten commented Mar 10, 2012

I want to release that version very soon. I have been a little busy. The thing is that the way the gradients are generated has to be reinvented. I believe this will be the main feature of the next release.

I'm using turn.js on iPad, even on a turn.js with comment: "procedure makes the gradients for non-webkit browsers", gradients aren't visible.
I got a sample (Bible) with this gradient on page's background:
#book .odd{
background-image:-webkit-linear-gradient(right, #FFF 55%, #ddd 100%);
background-image:-moz-linear-gradient(right, #FFF 55%, #ddd 100%);
background-image:-o-linear-gradient(right, #FFF 55%, #ddd 100%);
background-image:-ms-linear-gradient(right, #FFF 55%, #ddd 100%);

this worked fine...

may be possible to put something like above into turn.js close to comment: // Adds gradients

Best Regards


blasten commented May 1, 2012

Oh, those gradients are different. On Safari for iOS, the way is:

background-image: -webkit-gradient(linear, left top, right top, color-stop(55%,#FFF), color-stop(100%,#ddd));

I found in turn.js this code:

for (j = 0; j<numColors; j++)
cols.push('color-stop('+colors[j][0]+', '+colors[j][1]+')');
obj.css({'background-image': '-webkit-linear-gradient(left, '+p0.x+'% '+p0.y+'%, '+p1.x+'% '+p1.y+'%, '+ cols.join(',') +' )'});

so.. .to work with iPad should be like that? I'm no sure if this is the right part of code that makes all gradient's magic.

for (j = 0; j<numColors; j++)
cols.push('color-stop('+colors[j][0]+', '+colors[j][1]+')');
obj.css({'background-image': '-webkit-linear-gradient(linear, left top, right top, '+p0.x+'% '+p0.y+'%, '+p1.x+'% '+p1.y+'%, '+ cols.join(',') +' )'});

I'm testing with Xcode iPad simulator, but didn't work. In Mac's safari works fine...

Ps.: Your turn.js is Awesome!


blasten commented May 1, 2012

You don't need to change the turn.js code. To activate the gradients, you can use {gradients:true} and in the sample you mentioned, you have to add background-image: -webkit-gradient(linear, left top, right top, color-stop(55%,#FFF), color-stop(100%,#ddd)); to the CSS

I got turn.js gradients working on iPad!, just force gradients to true!

... $('#book').turn({acceleration: true,
display: 'single',
pages: numberOfPages,
elevation: 50,
gradients: true,
when: { ...

I'm stuck on this: #103

May someone help me?

Any progress on this?


blasten commented Jul 9, 2012

@andreasbovens Gradients work in all browsers.

@blasten blasten closed this Jul 9, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment