Slides shifted to the right in the webapp

[rcalsaverini]

Hello! Great project. I've been using markdown to write beamer slides for years (with pandoc) and this is a really nice addition to that space.

One small issue I've been having is that when I open the web app, my slides seem to be all shifted to the right.

Steps to reproduce

These are the steps I used:

1. On MacBook pro, open terminal, choose folder, and type npm init slidev and follow all standard options. Wait for all packages to be installed.
2. Open Google Chrome and navigate to http://localhost:3030.

The slides open like this:

[rcalsaverini]

I'm not really sure if there's something wrong with my environment or if it is hardware related. I don't really know much about frontend development.

I initially thought the culprit was my external monitor (although it has the same form factor as the MacBook's display) but this happens even with the external monitor disconnected.

The exported PDF is also shifted in the same direction (BTW, the latex is not correctly rendered in the exported PDF).

[antfu]

Can't reproduce on my side. Can you check the consoles, and inspect the dom to see what's wrong? Thanks

[kawamataryo]

I have the same issue.

Reproduction is here.
https://github.com/kawamataryo/slidev-demo

May-12-2021.05-01-23.mp4

I can fix it by removing the "margin: auto" from "#slide-content", but...

[nonlinearcom]

Hi, I think it can be solved by removing the width of "slide-content" :
<div id="slide-content" style="height: 551.25px; width: 980px; transform: translate(-50%, -50%) scale(0.694785);">

[antfu]

I can fix it by removing the "margin: auto" from "#slide-content", but...

Sorry but what? 😂

Looks like it's redundant, and we could remove it and push a fix

[antfu]

Released in 0.7.4. Would be appreciated if you can help verify if it works.

[kawamataryo]

Thanks. It has been fixed.

[rcalsaverini]

Thanks @antfu! It's 100% fixed on my setup, and working on different screens and resolutions.