Font sizes are rounded to the nearest 1px

• Component: Text
• Status: RESOLVED FIXED

[Gaurav Misra]

Fractional font sizes are ignored in safari and used only upto 1 decimal place in chrome. Firefox reads up to 3 decimal places making the font sizes render perfectly.

Use case:
On chatative.com I need every line to fit across the screen. Firefox fits every line exactly on the screen due to its proper handling of fractional font sizes and safari and chrome show the text slightly off the right edge.

[Ohad Eder-Pressman]

Created attachment 164498 [details]
test-case

[Ohad Eder-Pressman]

I confirm this is not working on Webkit. I can confirm that fractional/non-integer word-spacing is supported on IE (I tested PC IE 9.0.8112.16421IC) and Firefox-for-Mac (I tested Mac Firefox 10.0.2).

See http://ohad-etc.s3.amazonaws.com/eReader%20content%20bugs/test3/index.html for screenshots of all major browsers and how they handle this case.

[Jonas Munk]

I realize that this is something done in order to be compatible with small font sizes in older IE versions in the past.

Maybe having a CSS property to trigger "perfect" font-size is a good first step - like font smoothing.

I find it especially annoying when animating the font-size since I know webkit has good font rendering support.

I guess it complicates calculating the layout.

Can you elaborate on that?

Fractional font sizes are still being dropped/rounded as of Safari 11.1 / Webkit 605.1.15

Test cases:

Canvas: http://jsfiddle.net/w6xh4mu5/5/
HTML: http://jsfiddle.net/64hwk8bt/1/
SVG: http://jsfiddle.net/osLr6zdv/1/

Firefox, Chrome, and Edge all support fractional font sizes.

[Radar WebKit Bug Importer]

<rdar://problem/40829933>

[Myles C. Maxfield]

Yeah, we purposely round the font sizes so that we get a higher hit rate in our various caches.

[Myles C. Maxfield]

See FontDescription::computedPixelSize()

https://trac.webkit.org/browser/webkit/trunk/Source/WebCore/platform/graphics/FontDescription.h#L66

unsigned computedPixelSize() const { return unsigned(m_computedSize + 0.5f); }

[Myles C. Maxfield]

Created attachment 349244 [details]
WIP

[Myles C. Maxfield]

Created attachment 349245 [details]
WIP

[Myles C. Maxfield]

Created attachment 349247 [details]
WIP

[Shane Brinkman-Davis Delamore]

I'd like to add my vote for getting this fixed.

This is an important bug for my company. We use HTMLCanvas extensively. When using fractional font-sizes combined with transformation matrices, this bug leads to large rendering errors:

jsFiddle: http://jsfiddle.net/w6xh4mu5/26/

Fail: 
- Safari Version 12.0 (14606.1.36.1.9)

All other major browsers render fractional fonts correctly:

- Chrome 70.0.3538.77
- Microsoft Edge 42.17134.1.0
- Firefox 63.0 
- Opera 56.0.3051.52
- Internet Explorer 11 (yes, even IE11 renders correctly!)

NOTES

In some cases our apps could multiply the font-size and scale the matrix down, but if we are, say, stroking an outline, or if the x/y scale ratio is not 1:1, this technique doesn't work.

Does rounding the font-size (before scaling) actually meaningfully increase cache-hits in the HTMLCanvas context? The rendered pixels are different as the scale changes anyway. Caching is good and all, but it should never lead to errors greater than about a pixel.

[Myles C. Maxfield]

*** Bug 228545 has been marked as a duplicate of this bug. ***

[Ashley Gullen]

This appears to be causing issues for us too: if you smoothly scale or zoom text, it jumps around. Worse, it looks like measureText() does use fractional sizes, but when you draw text it doesn't use a fractional size, which throws off our word wrap code and causes the edges of text to be cut off. If this is some kind of limitation in Safari, then measureText() should at least implement the same restriction, otherwise you can get text measurements that do not match what will be drawn.

Ref: https://github.com/Scirra/Construct-3-bugs/issues/4978
Sample video: https://photos.app.goo.gl/hN3CE6KtwbbLoeuq5

[Ashley Gullen]

Actually I'm not sure what measureText() does, maybe it is the same, but either way this interacts badly with our word wrap code.

[Ahmad Saleem]

I am able to reproduce bug from JSFiddle present in Comment 11 on Safari 15.5 (macOS 15.5). Chrome Canary 104 and Firefox Nightly 103 does not seems to have any issue on the test and matches each other. Thanks!

[Théophile Avoyne]

That's critical to my company as well. We use fractional font sizes to scale up/down printable documents based on the viewport height/width. Resizing is smooth in every browser except Safari.

[Myles C. Maxfield]

*** Bug 244527 has been marked as a duplicate of this bug. ***

[Myles C. Maxfield]

Pull request: https://github.com/WebKit/WebKit/pull/3795

[Antoine Quint]

*** Bug 244994 has been marked as a duplicate of this bug. ***

[EWS]

Committed 265657@main (30e54c675564): <https://commits.webkit.org/265657@main>

Reviewed commits have been landed. Closing PR #3795 and removing active labels.

[Ahmad Saleem]

*** Bug 181504 has been marked as a duplicate of this bug. ***

[Ahmad Saleem]

*** Bug 250020 has been marked as a duplicate of this bug. ***

[Ahmad Saleem]

*** Bug 149211 has been marked as a duplicate of this bug. ***

[Ahmad Saleem]

*** Bug 249962 has been marked as a duplicate of this bug. ***