CSS3 scale property produces bad quality on lower-than-config-resolution windows
- Dominant language
- JavaScript
- Stars
- 38.2k
- Forks
- 6.6k
- PR merge metrics
- No merged PRs in 30d
Description
There are several other issues in this repo that deal with sizing/scaling a slide/step to fit into the browser
window. This issue deals with visual artifacts produced by the CSS `scale` property.
As far as I understood the current implementation the scale value will be `<1` if the browser windows content area is too small to fit a given resolution inside the browser window. The resolution (in `px`) is given via defaults or the `data-width` and `data-height` attributes on the impress root element. This will NOT "perfectly" fit a presentation into windows that provide higher resolution than the configured one (common on high-dpi displays). Also this will create aliasing artifacts on windows that are smaller than the configured resolution (the scale value is `<1`). I think (!) the aliasing artifacts are created by the browser when rendering the "scene" in its native resolution (e.g. 1920x1080) and downscaling this scene to e.g. 1024x576 (common beamer resolution). Hinting and antialiasing done by the vector graphics rasterizer of the browser are destroyed (correct me if I'm wrong).
This is a magnified screenshot of native resolution font rasterization:

This is a magnified screenshot of the scaled font rasterization:

You can see that the scaled scene has more aliasing artifacts than the native resolution image.
I tried to accomplish an always-fitting-slide without using the CSS `scale` property with `vw` and `vh` properties at a slide aspect ratio of `16:9`. This approach can set the `font-size` to e.g. `4vh` to scale all the content with the slide. When using `em` to size all the content it should work pretty good. I did not use `impress.js` for this example, so it remains to be seen if such a change can be integrated into `impress.js`.
~~[Example without CSS scale (jsfiddle)](https://jsfiddle.net/gopbjogy/4/)~~
Update: [Example without CSS scale (jsfiddle) - correct font scale](https://jsfiddle.net/gopbjogy/5/)
This approach would make a presentation fully independent to the users browser window resolution. The translate calls that are done by `impress.js` for moving the slide/step canvas has to be adopted to not use `px` but use `vw/vh` respectively. I played around with the units of the translate property and `vw/vh` seem to work for translations.
Please add comments for further investigation of this issue.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reviewing impress.js's current scaling and translation behavior, then compare it with the updated no-CSS-scale jsfiddle example linked in the issue. Determine a concrete browser-compatible approach that removes the reported aliasing artifacts while preserving fitting and positioning across window sizes; the issue provides no named source files or tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100