Cutoff occurs with Safari/Firefox when using margin-top with .reveal .slides

[cmoulliard]

When I use the css property margin-top to get more space top of the screen,

.reveal .slides {
  text-align: left;
  margin-top: 20px;
}

this option works very well with Google Chrome (not matter which screen resolution we are using) and also for Safari but only for a specific size

Good :

Bad :

Is there a workaround for Safari/Firefox ?

I suspect that this issue is related to the mechanism used to display the slides : zoom (width: 960px; height: 700px; zoom: 0.666285714285714;") for Google Chrome and scale / transform for Safari/Firefox (style="width: 1000px; height: 750px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.712533);)

[hakimel]

If you're looking to add additional spacing between the browser edge and presentation content please use the "margin" configuration option, mentioned here: https://github.com/hakimel/reveal.js#presentation-size

For example here's the demo page with an increased margin: http://lab.hakim.se/reveal-js/?margin=0.5

[cmoulliard]

Sorry for my mistake. This problem only occurs for revealjs packaged with slides.com web site. Apparently the javascript of revealjs (slides.com) is different from the opensource project. If I use the revealjs javascript (version : 2.6.2), that works fine using margin property.

So this problem should be investigated with the slides.com support, isn't it ?

[hakimel]

Closing – this conversation moved to a Slides support ticket.