textarea#field-description renders incorrectly in Chrome when JS wikitoolbar is absent

[Ethan Jucovy <ethan.jucovy@…>]

When Javascript is disabled, the "description" textarea is rendered much too widely in Google Chrome, which makes the gray "properties" box no longer centered evenly on the page. When Javascript is disabled, the same textarea is also rendered on top of the label#field-description-help that precedes it, causing that label to be completely hidden from the user's view.

For reasons I don't understand, the width problem (but not the hidden-label problem) can be fixed by either wrapping the textarea in a div, or inserting any div right before the textarea.

This problem is therefore suppressed when Javascript is enabled, because wikitoolbar.js inserts a <div class="wikitoolbar"> just before the description textarea. This causes the textarea's width to be rendered correctly, and also prevents the textarea from hiding its label. So, the problem would also appear with Javascript enabled, if the wikitoolbar.js file is not loaded for any reason (like #10837)

Tested on Google Chrome v21.0.1180.89 on Ubuntu 11.04 and Mac OS X 10.7.4 with Javascript disabled.

The width problem does not seem to be the same on Firefox v15.0 — in that browser the textarea is always slightly too wide, with or without Javascript enabled. (But when Javascript is disabled, the label is hidden in Firefox as well.) I'm guessing this is caused by the same problem, or would at least be fixed by the same CSS/markup solution.

Screenshots of the problem are attached, for Chrome (without JS) and Firefox (with JS).

[Remy Blank]

The issue on Firefox is likely due to the size="70" attribute of the full-width text input fields (in this case the "Summary" field). Try reducing it to size="60" and the width should be fine again (except for the field itself, of course). We should try and find a way to make the text input fields full-width without using size=.

The disappearing help text is due to its being float: right, so it doesn't take any vertical space, and when the wiki toolbar goes away, it gets hidden.

For the issue on Chrome, I have no idea yet.

[Ethan Jucovy <ethan.jucovy@…>]

Slight correction:

So, the problem would also appear with Javascript enabled, if the wikitoolbar.js file is not loaded for any reason (like #10837)

The resizer.js code also wraps the textarea in some divs when it's loaded, so in order to see the problem without disabling Javascript altogether, you need to set resizable_textareas = false as well as disabling the wikitoolbar.js code.

[Jun Omae]

I found workaround for this. It would display also the help text. Tested with Chrome 22, Firefox 15, IE8, IE8 compatibility mode, Opera 12 and Safari 5.

trac/htdocs/css/ticket.css

@@ -9 +9 @@
 
 #field-description-help { float: right }
 #properties div.trac-resizable, #field-description { width: 100% }
+/* #10845 Workaround incorrectly rendering on Chrome */
+#field-description { display: block }
 
 #ticket {
  background: #ffd;

[Jun Omae]

Firefox 30 has the same issue when javascript is disabled on Trac 0.12.5 or [trac] wiki_toolbars = disabled and [trac] resizable_textareas = disabled on 1.0-stable.

[Ryan J Ollos]

Moved ticket assigned to next-stable-1.0.x since maintenance of 1.0.x is coming to a close. Please move the ticket back if it's critical to fix on 1.0.x.

[Ryan J Ollos]

1.2-stable and trunk don't exhibit the issue with Chrome 60 and FF 55.