search

blasten / turn.js

The page flip effect for HTML5
www.turnjs.com
Other
7.23k stars 2.48k forks source link

Shadow effect on mobile devices? Flipbook Coding Problem? #422

Open davidhunternyc opened 10 years ago

davidhunternyc commented 10 years ago

Hello, I am coding my website in HTML5. I am having a problem with just one of my pages; the PHOTOBOOK page. When the PHOTOBOOK page is loading up onto the website, a strange anomily happens, a dark shadow appears to the left and right margins of the screen. This happens with Mac OS X and iOS7, on all devices. This also only happens on this one page. Do any of you know what is happening? When I remove the turnjs flipbook from this page, the shadow anomily disappears. When I reinstall the flipbook the shadow appears again.There has to be some kind of error in the code? Please help. Thanks. Here is my website address: http://bigapplephototours.com/html5/flipbook.html

shadow

TimOgilvy commented 10 years ago

It looks like you might have fixed this already? It's most likely that one of the CSS classes that applies to your book 'page' is also applying to the browser 'page'. I don't have an element inspector for mobile browsing, but this http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/ might help.

It's almost definitely a CSS double up, so try wrapping your flipbook in:

<DIV class="flipbook">
   --  book code here ---
</DIV>

and then adding .flipbook to all your classes, ie:

.flipbook .page {
    box-shadow: (etc...)
}
davidhunternyc commented 10 years ago

Hi Tim, I will check this out. Unfortunately, no, I have not fixed this problem. This is no longer an issue with Mac OS X but it is still an issue with iOS7. Check out the PHOTOBOOK on an iPad or iPhone. The problem still persists. I will see what your advice yields. Thank you so much for your help and response. I will email you if or if not your advice fixes the problem. Regards, David

On Thu, Nov 28, 2013 at 7:44 PM, Tim notifications@github.com wrote:

It looks like you might have fixed this already? It's most likely that one of the CSS classes that applies to your book 'page' is also applying to the browser 'page'. I don't have an element inspector for mobile browsing, but this http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/might help.

It's almost definitely a CSS double up, so try wrapping your flipbook in a and then adding .flipbook to all your classes, ie:

.flipbook .page { box-shadow: (etc...) }

— Reply to this email directly or view it on GitHubhttps://github.com/blasten/turn.js/issues/422#issuecomment-29490724 .