Slides show off-center when used in a Vite.js project

[michaelmior]

Prerequisites

• [x] I have searched the open issues to make sure I'm not opening a duplicate issue
• [x] I have read through the docs before asking a question
• [x] I am using the latest version of Spectacle

Describe Your Environment

What version of Spectacle are you using? (can be found by running npm list --depth 0 spectacle) 9.6.0

What version of React are you using? (can be found by running npm list --depth 0 react) 18.2.0

What browser are you using? (e.g., Chrome 105.0.5195.102, Safari 16.0) Firefox 108.0.2

What platform are you on? (e.g., Windows, macOS, iOS, Android) macOS

Describe the Problem

I've tried creating a Spectacle presentation using Vite. Everything almost works, except when slides are displayed, the left edge of the slide is at the center of the screen instead of the center of the slide.

https://github.com/michaelmior/vitejs-spectacle

Expected behavior: [What you expect to happen]

Slides should be correctly centered in the viewport.

Actual behavior: [What actually happens]

The left edge of slides appears at the center of the scren.

Additional Information

I've noticed that Spectacle is using display: unset for the current slide. If I switch to display: inherit, the problem goes away.

[elawad]

I had the same issue with Vite. The fix was to remove Vite's App.css. It was styling the #root element, conflicting with Spectacle.

[michaelmior]

@elawad I was sure when I first saw your comment that I had already removed all existing CSS. But of course I had to double-check before replying, and indeed I hadn't. That solved my problem. Thanks!