932743 - strikethrough is rendered wrongly when big font size is used, superscript element etc.

Status: UNCONFIRMED

(Core :: Layout: Text and Fonts, defect, P5)

Description

[Wiktor Walc]

Attachment: s.html

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.76 Safari/537.36

Steps to reproduce:

One of our customers reported that strike element "is rendered wrongly" in Firefox.
It was reported for CKEditor: http://ckeditor.com/ but *has nothing to do with the editor or contenteditable at all*.

I tried three different HTML snippets (see the attached file) and compared the results in different browsers. They seemed to look quite consistent in IE/Chrome/Opera, while in Firefox they look totally different.

This looks similar to (especially with comments added by Aryeh Gregor): 
https://bugzilla.mozilla.org/show_bug.cgi?id=778796
but can be reproduced using a plain HTML file.



Actual results:

Behaviour in Firefox:

1)

<p><s><span style="font-size:48px">E=mc<sup>2</sup></span></s></p>

Strikethrough looks almost like an underline for the whole formula

2) 

<p><span style="font-size:48px"><s>E=mc<sup>2</sup></s></span></p>

Strikethrough is rendered almost properly, but it still just underlines the <sup> element.

3)

<p><s>foo<span style="font-size:48px">bar</span>baz</s></p>

Strikethrough for "bar" looks almost like an underline


Expected results:

Behaviour in IE/Chrome/Opera:

1, 2, 3)

<p><s><span style="font-size:48px">E=mc<sup>2</sup></span></s></p>

<p><span style="font-size:48px"><s>E=mc<sup>2</sup></s></span></p>

<p><s>foo<span style="font-size:48px">bar</span>baz</s></p>

Strikethrough always strikes each element in the middle of it.

Comment 1

[Jonathan Kew [:jfkthame]]

I'm not sure the Firefox result is wrong in all cases here... rather, I think the markup is poorly structured for the intended result. In particular, note that for an example such as:

  data:text/html,<div><u>1<sup>st</sup></u></div><div>1<sup><u>st</u></sup></div>

the rendering in Firefox is *correct* according to http://dev.w3.org/csswg/css-text-decor-3/#line-decoration (see Figure 7 there), while Chrome is incorrectly moving the underline along with the superscripted "st" in the first line.

(To see why the Firefox behavior, as per the text-decoration spec, makes sense (at least some of the time!), try comparing an example like:

  data:text/html,<div><u>October 31<sup>st</sup>, 2013</u></div>

where Chrome's broken underline looks quite bad, IMO.)

If you want the strikethrough to "follow" the vertical positioning and font size of the various elements, it should be applied *within* each of those elements individually. A strikethrough applied "outside" them is treated uniformly across the whole of the (ancestor) element to which it applies.

Comment 2

[Mats Palmgren (inactive)]

Attachment: testcase

Comment 3

[Mats Palmgren (inactive)]

The rendering of "testcase" in Nightly on Linux64 looks correct to me.