Description
When using Reveal.js to create presentations with positioned content boxes, there's an inconsistency in how content is displayed across different screen sizes. Specifically:
- When the browser window is reduced in size (not maximized), all text content is fully visible.
- When the browser window is maximized, the upper portion of text content becomes cut off or invisible.
This behavior suggests a potential issue with how Reveal.js handles absolute positioning in responsive contexts.
Reproduction Steps
- Create a slide with a content box that uses absolute positioning with percentage-based values
- Position the content using
toppercentage values (e.g.,top: 50%) - Use
transform: translate(-50%, -50%)for centering - View the presentation in a maximized browser window
- Resize the browser window to be smaller
- Notice the difference in content visibility between the two states
Expected Behavior
Content positioned with absolute positioning should be consistently visible regardless of browser window size. Elements positioned with percentage-based values should scale proportionally while maintaining their visibility.
Actual Behavior
Content is fully visible when the browser window is smaller, but when maximized, the upper portion of content becomes cut off or entirely invisible.
Attempted Solutions
Solution 1: Using bottom instead of top positioning
.content-box {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
/* other styles */
}Result: This caused all content to completely disappear, with only fixed position elements like the "AI-Powered Assistant" label remaining visible.
Solution 2: Using adjusted top percentages with modified transform
.content-box {
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, 0);
/* other styles */
}Result: This solution worked correctly, showing that Reveal.js has compatibility issues with certain positioning approaches.
Solution 3: Adding responsive adjustments
@media (max-height: 700px) {
.content-box {
top: 70%;
}
}
@media (max-height: 500px) {
.content-box {
top: 65%;
}
}Technical Details
- Reveal.js version: Clone on 2025/03/14
- Browser: Chrome Version 134.0.6998.89 (Official Build) (64-bit)
- OS: Windows 11 (64-bit)
Conclusion
There appears to be an incompatibility between Reveal.js's presentation rendering and certain CSS positioning techniques, particularly:
- Bottom-based positioning (
bottom: Npx) causes elements to disappear completely - Default top-based positioning with vertical centering (
top: 50%, transform: translate(-50%, -50%)) causes content to be cut off in maximized browser windows
The workaround is to use top-based positioning with a higher percentage value and remove the vertical transform component:
top: 75%;
transform: translate(-50%, 0);This issue affects the creation of responsive presentations and requires developers to use specific positioning techniques that may not be intuitive.