Famous / Famous/engine

Ideas for solving blurred text on transform scaling

Open
#434 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1.7k
Forks
249
PR merge metrics
No merged PRs in 30d

Description

When the `matrix3d` contains decimal values, associated text content appears blurry. On Chome 43, open the developer tools and set the size of the window to an odd width & height and run the following code:

```
'use strict';

var DOMElement = require('famous/dom-renderables/DOMElement');
var FamousEngine = require('famous/core/FamousEngine');
var Size = require('famous/core/Size');

if (window.innerWidth % 2 === 0 || window.innerHeight % 2 === 0) {
throw new Error('the innerWidth and innerHeight are not odd numbers');
}

FamousEngine.init();

var logo = FamousEngine.createScene().addChild();

var domLogo = new DOMElement(logo, {
properties: {
'background-color': '#49afeb',
'white-space': 'nowrap',
'text-overflow': 'ellipsis'
}
});
domLogo.setContent('The quick brown fox jumps over the lazy dog, the quick brown fox jumps over the lazy dog');

logo
.setSizeMode(Size.ABSOLUTE, Size.ABSOLUTE)
.setAbsoluteSize(100, 100)
.setAlign(0.5, 0.5)
.setMountPoint(0.5, 0.5)
.setOrigin(0.5, 0.5);
```

The text appears blurry because of the .5 in the transform, removing the .5 causes the text to appear crisp/sharp. _(This is a known issue)_

I'm wondering if a flag should be available that causes the transform calculations to be rounded to the nearest decimal... ? Or will this cause too much performance overhead?

Other ideas?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.