Page MenuHomePhabricator

Provide a workaround to modern Microsoft browser's 'font-size .css settings in relative units with values to three or more decimal places' miscalculation bug
Closed, ResolvedPublic

Description

Under Microsoft browsers IE9, IE10, IE11 & Edge, the .CSS definitions dealing with the font-size -to- line-height attribute relationship, when set by using relative unit values (em, rem) with a precision of more than two (e.g. 0.8750em), are automatically rounded to only 2 digits after the decimal point (e.g. 0.87em). This is by design according to Microsoft themselves.

In a nutshell - For wiki-Foundation visitors using the affected Microsoft browsers, this means the expected Vector [calculated] defaults resulting in a font-size of 14px (16 × 0.8750 = 14) and a line-height of 22.4px (14 × 1.6 = 22.4) are actually rendering a font-size of 13.93px (16 × 0.87 = 13.93) and a line-height of 22.28px (13.93 × 1.6 = 22.28) for starters. Plus, any .css selectors that are calculated &/or defined based on &/or inherited from the current defined entry (illustrated above) will also be increasingly "off" compared to non-Microsoft browser users.

A simple change in the current Vector stylesheet should both begin to address this bug for IE 9, 10, 11 & Edge users while continuing the current "support" for [as far as I've tested] IE8 at the minimum. Applying the "workaround" might even rectify all sorts of reported "mis-alignments" & such for affected users

current
.mw-body-content {
    position: relative;
    font-size: 0.8750em;
    line-height: 1.6;
    z-index: 0;
}
proposed
.mw-body-content {
    position: relative;
    font-size: 0.8750em;
    font-size: calc(1em * 0.8750 );
    line-height: 1.6;
    z-index: 0;
}

Version: 1.26+

Event Timeline

GOIII raised the priority of this task from to Needs Triage.
GOIII updated the task description. (Show Details)
GOIII added subscribers: GOIII, Edokter, Quiddity and 2 others.

Seems like it should help resolve some of that at the minimum but I'm not so sure when it comes to those instances of background-size & OOjs in particular. I'm under the impression it is best to leave it's settings to auto -- or apply percentages if need be. Using contain &/or cover always seem to introduce more headaches than resolve them for me. YMMV.

Jdlrobson triaged this task as Lowest priority.Sep 24 2015, 12:21 AM
Jdlrobson subscribed.

Sounds sensible but not seeing a clear impact on users at current time. Patches welcomed!

GOIII renamed this task from Provide a workaround to IE's font-size .css settings in relative units with values to three or more decimal places miscalculation bug to Provide a workaround to modern Microsoft browser's //font-size .css settings in relative units with values to three or more decimal places// miscalculation bug.Apr 21 2016, 3:10 AM
GOIII renamed this task from Provide a workaround to modern Microsoft browser's //font-size .css settings in relative units with values to three or more decimal places// miscalculation bug to Provide a workaround to modern Microsoft browser's 'font-size .css settings in relative units with values to three or more decimal places' miscalculation bug.
GOIII updated the task description. (Show Details)

This would probably solve T94494?

We ended up doing something different there. OOjs UI icons should no longer be blurry on IE 11 due to this issue. Other things might still be affected.

This would probably solve T94494?

We ended up doing something different there. OOjs UI icons should no longer be blurry on IE 11 due to this issue.

Not very elegant imho - that workaround assumes the skin in use will always have a calculated [content] font size < or = to 14px (vector, OOUI demo & others) which is fine for 24px based icons but 12px indicators will get clipped again with skins set to anything higher than that (like mobile mode [Minerva] at a font size of 16px for instance).

Other things might still be affected.

Anything set-to or calculated-from an em value of more than 2 'decimal places' is still "affected" to one degree or another. Using the calc workaround with the existing value(s) as a fall back solves most intrinsic dimension issues under MS browsers though some issues with this "rounding" problem persist.

Picking this up again. @GOIII I'm assuming the calc workaround solves the issue in the use cases mentioned by you, as it leaves the correct (not rounded to 2 subdecimal digits) value in memory and calculate further from there? Wondering what the reason was for this behaviour, if there were rendering performance concerns involved…?

Change 583812 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/Vector@master] Use calc in font-size to harmonize IE 9-11

https://gerrit.wikimedia.org/r/583812

Change 583812 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Use calc in font-size to harmonize IE 9-11

https://gerrit.wikimedia.org/r/583812

Change 638070 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Use calc in font-size to harmonize IE 9-11

https://gerrit.wikimedia.org/r/638070

Change 638092 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[wvui@master] [styles] Improve font-size-base calculation and add IE 11 workaround

https://gerrit.wikimedia.org/r/638092

Change 638070 merged by jenkins-bot:
[oojs/ui@master] Use calc in font-size to harmonize IE 9-11

https://gerrit.wikimedia.org/r/638070

Change 638092 merged by jenkins-bot:
[wvui@master] [styles] Improve font-size-base calculation and add IE 11 workaround

https://gerrit.wikimedia.org/r/638092

Volker_E claimed this task.
Volker_E removed a project: Patch-For-Review.

With putting it into WVUI, this is successfully resolved for IE (9-)11 targeted interfaces.

Change 645179 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update OOUI to v0.41.0

https://gerrit.wikimedia.org/r/645179

Change 645179 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.41.0

https://gerrit.wikimedia.org/r/645179

Volker_E edited projects, added OOUI (OOUI-0.41.0); removed OOUI.
Volker_E removed a project: Patch-For-Review.

Given that IE11 has been downgraded to Grade C support, combined with the current font-size work being done in Vector (introducing rems & css custom properties), I think it might be time to drop this workaround from Vector 2022 in order to relieve some maintenance overhead.

Sounds good to me. Want to create a ticket?