1069849 - Inline elements with "cancelling" padding and margin wrap differently in Firefox compared to other browsers

Status: NEW

(Core :: Layout, defect)

Description

[Oto]

Attachment: Word wrap highlight glitch

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0
Build ID: 20140911151253

Steps to reproduce:

There is an issue that edit forms and also on some webpages when highlighting text it jumps to new line as it's size changes. See for example this example from Google translate.

http://goo.gl/Q7RLiv


Actual results:

when highlighting word it skips to next line


Expected results:

when highlighting word it  should stay in place.

Comment 1

[:Gijs (he/him)]

Simple testcase: http://jsbin.com/cucoh/1/edit .

The issue is that the hovered word gets padding: 2px 3px; and margin: -2px -3px; . In Chrome, this seems to have a net 0 effect on the layout of the span. In Firefox, that isn't the case.

Note that when not wrapping, it's obvious both the "highlighted" element and the "non-highlighted" element take up the same amount of space when both padding and margin have been taken into account.

Comment 2

[:Gijs (he/him)]

Added a border to the testcase for clarity.

Comment 3

[Boris Zbarsky [:bzbarsky]]

This is basically the same issue as bug 912777.

Comment 4

[:Gijs (he/him)]

(In reply to Boris Zbarsky [:bz] from comment #3)
> This is basically the same issue as bug 912777.

Per summary, I guess this can just be a duplicate? Is there something different between the two bugs that I'm missing?

Comment 5

[Oto]

Original issue was about element highlight not links but technically it could be same issue.

Comment 6

[Boris Zbarsky [:bzbarsky]]

That bug is possibly partially about computing the shrink-wrap width, while this one is purely about the wrapping behavior.

So it's pretty likely that they're the same underlying issue, but it might need fixing in a few different places.