316317 - input lists accumulate indentation

Status: RESOLVED WORKSFORME

(Core :: Layout: Form Controls, defect)

Description

[Berkana]

User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8) Gecko/20051107 Camino/1.0b1
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8) Gecko/20051107 Camino/1.0b1

Lists of checkboxes do not align correctly; each successive checkbox seems to pick up an indent.

(The demo page is in html 4.01)

Reproducible: Always

Steps to Reproduce:
1. go to the URL of a page that demonstrates the problem.
2.let the page load.

Actual Results:  
Each successive checkbox in a list shows up indented; indentation accumulates.

Expected Results:  
I expected the check boxes not to be indented at all.

This problem showed up in all of the pages with lists of checkboxes linked from http://www.apple.com/feedback/

Comment 1

[Chris Lawson (gone)]

This is a problem with Apple's CSS, not the Gecko rendering engine. Bump up your default font size one notch and the problem goes away (unless you have a very small default font size). Apple should be using slightly greater padding between elements in the unordered list that contains the checkboxes in order to avoid this problem. (Also, I suspect someone just forgot to test with a Gecko browser with a smaller-than-factory default font size set.)

Someone should e-mail Apple about this, but it doesn't seem like a big enough deal for Tech Evangelism to worry about. Marking INVALID. If someone wants to reassign this to TE, go ahead.

cl

Comment 2

[Berkana]

That seems odd; Firefox is also a Gecko based browser if I'm not mistaken, but it renders the pages just fine, whereas Camino shows indenting. How can that be if both use the same rendering engine?

Comment 3

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

Yeah, this is a problem; the equivalent Fx nightly renders the list fine, and that shouldn't be happening.

We need a reduced testcase: http://www.mozilla.org/newlayout/bugathon.html#testcase

Comment 4

[Chris Lawson (gone)]

(In reply to comment #3)
> Yeah, this is a problem; the equivalent Fx nightly renders the list fine, and
> that shouldn't be happening.

Does the equivalent Fx nightly use the exact same font settings? This is *entirely* due to the font size relative to those checkboxes.

cl

Comment 5

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

Yes, my default fonts are Times/Helvetica/Courier 12pt in each.  Moreover, no amount of shrinking font size in Fx could cause the check-boxes to start indenting.

Comment 6

[Chris Lawson (gone)]

In that case, I think we've got another forms.css issue on our hands, because that's the only explanation I can think of for the difference. Probably need to adjust either the line-height or top and bottom padding on checkboxes.

cl

Comment 7

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

So here's the deal; give Chris a cookie since he was partially right :-)

If I increase the padding on the li element in that page .1em, we're back in business (although the text is not aligned very well at all with the checkboxes).  

(The font stuff was all spurious, though, since the text-size is 10px in Apple's CSS--the only way you'd not see this is if you habitually + your text in the View menu or you bump the min font size setting above 10px.)

Bop Apple on the nose, I guess, for only testing in Sf and Fx (this bug existed in Cm 0.8.4 as well).

Turns out that in Safari (look at the Render Tree in the Debug menu, for the RenderCheckBox), a checkbox is 15px wide by 12px high.  In Fx it's 13x13.  We've got 15x15 boxes, which are apparently too tall (though, even outlining the elements, I don't see any overlap that would be causing it, or underlap, or...I still don't understand how we get this particular error with this bit of html). 

(We also have different margins from Fx; ours are 1px 2px 0px 3px vs. 3px 3px 3px 4px, but I didn't play with any of that once I saw the height difference.  Well, I tried a 3px bottom margin so that the sum of box height+top/bottom margins was the same in Cm and Fx, but that made things worse, so I'm pretty sure it's the box height that's the real issue here.)

So, the questions are: 1) is my diagnosis correct, 2) if so, do we want to fix this, or will it cause wild regressions elsewhere, and 3) if so, do we adopt the Safari or the Firefox checkbox size?

Comment 8

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

Attachment: Partially-reduced testcase

Here's my hack-up of the page in question....

Comment 9

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

Attachment: Some regressions

At the 12px setting, here are some notable "regressions": Bugzilla, Gmail.

The stars were almost cut off a bit with our existing setting.  Safari apparently has a smaller, 10x10 checkbox that it uses in cases like Bugzilla.

Comment 10

[Stuart Morgan]

Firefox trunk now has the same behavior, so moving to widgets. I'm not convinced this is really a bug, but that's something that should probably be decided by core.

Comment 11

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

For Firefox, this is a regression from bug 175279 and friends, although I'm not entirely convinced this is a Gecko bug, either.  If Firefox shows it, Apple might fix their CSS :p

Comment 12

[philippe (part-time)]

It is only a bug if you consider the fact that the generated box for the checkbox is 15px tall as 'wrong' (where as WebKit/Safari it is 12px tall).
The height is generated somewhere in NSNativeTheme*.*
Minefield Windows seems to have a height of 13px for the checkbox.

Opera 9.22 Mac suffers from the same issue btw.


(In reply to comment #7)

> I still don't understand how we get this particular error with this bit of
> html). 

I would consider the issue here a site design bug: the checkbox is floated left instead of being inline. A simple input[type="checkbox"] {clear:left} in their stylesheet would fix the whole thing).

What Gecko and Opera Mac do is correct, given the constrain of the height on the checkbox.

Comment 14

[Josh Aas]

Moving this to layout - this doesn't look like a widget bug, they can move it back if it is.

Comment 15

[Michelle Funches - QA]

No longer reproducible
http://www.apple.com/feedback/imovie_ios.html
Check-boxes are aligned
Version 	46.0.1
Build ID 	20160502172042
User Agent 	Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:46.0) Gecko/20100101 Firefox/46.0