impress / impress/impress.js

CSS3 scale property produces bad quality on lower-than-config-resolution windows

Open
#609 11 comments 0 reactions 0 assignees View on GitHub
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:
![native-resolution](https://cloud.githubusercontent.com/assets/5300274/24779949/0556a008-1b34-11e7-9d78-d945617e297e.png)

This is a magnified screenshot of the scaled font rasterization:
![aliasing](https://cloud.githubusercontent.com/assets/5300274/24779952/0b7ffaa6-1b34-11e7-8560-aefe676bccf0.png)

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.