bespokejs/bespoke-theme-cube

IE11, slides not centered

Closed this issue · 4 comments

I used generator-bespoke to generate a presentation, accepting all the defaults. The presentation looks great under Chrome and Firefox, but under IE11, the slides are not centered.

Maybe it's got to do with bespoke-scale? It looks like the top and left margins are not correct.

It's not a problem for me as presenter, as I'll be showing my slides using Chrome, but I will also be publishing my slides, and there will definitely be some IE users out there viewing them ...

Here's a screenshot:
bespoke

Have you attempted to fix it? I don't have access to IE11 at the moment.

I've looked into to it a bit. I now think that the problem lies with bespoke, and not the theme. Your 'Gulp vs Grunt' presentation has the same problem under IE.

It has to do with the 'zoom' inline style on the section.
If I remove the inline style 'zoom: 1.65' and replace it with 'transform: scaleX(1.65) scaleY(1.65)' it seems to be centered correctly.

I assume that the zoom style is done in JavaScript, and can't see that in the theme's JS, so I'm guessing it's somewhere in bespoke ...

Should I reopen this issue on bespoke.js?

Okay, spent more time on this. And I see I should be looking at bespoke-scale. I changed the options to 'transform', and all works fine on IE11, but now the text is a bit fuzzy (out of focus) on Chrome.

Should I detect IE11 in my main.js and send 'transform' to bespoke-scale when necessary? (This problem may also occur in IE9/10 as well, but I don't have access to them at this moment).

Sorry, based on your investigation, I agree that it's clearly an issue with bespoke-scale. Would you mind re-opening the issue there?