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

UNCONFIRMED
Unassigned

Status

()

P5
normal
UNCONFIRMED
5 years ago
5 years ago

People

(Reporter: w.walc, Unassigned)

Tracking

({testcase})

25 Branch
x86_64
Linux
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [bugday-20131030])

Attachments

(2 attachments)

(Reporter)

Description

5 years ago
Created attachment 824593 [details]
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.

Updated

5 years ago
Component: Untriaged → Layout: Text
Product: Firefox → Core
See Also: → bug 778796
Whiteboard: [bugday-20131030]
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.
The rendering of "testcase" in Nightly on Linux64 looks correct to me.
Keywords: testcase
Priority: -- → P5
You need to log in before you can comment on or make changes to this bug.