Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use content-visibility CSS property to show and hide slides #277

Closed
yhatt opened this issue Aug 28, 2020 · 0 comments · Fixed by #285
Closed

Use content-visibility CSS property to show and hide slides #277

yhatt opened this issue Aug 28, 2020 · 0 comments · Fixed by #285

Comments

@yhatt
Copy link
Member

yhatt commented Aug 28, 2020

content-visibility CSS property in Chrome 85 is the smartest solution for to work slide preloading with avoiding both of issues #153 and #236.

content-visibility: hidden is like a mid state of display: none and visibility: hidden: Elements will be invisible by UA (including user's eye, screen-reader, and search in page), but still calculate the layout in children if needed.
https://drafts.csswg.org/css-contain/#using-cv-hidden

Browser always will skip rendering contents in the element with content-visibility: hidden so the rendering performance has improved as same as using display: none; (#143). Furthermore Marp Core's auto-fitting can use the correct value calculated in "lazy" layout phase (#154).

Marp CLI has made Bespoke's load plugin for detecting auto-fitting elements, but it won't need to use if used content-visibillity: hidden. In addition, annotating aria-hidden to inactive slides through JS (#238) is also not required.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant