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.
Created attachment 825556 [details]
testcase
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.