Firefox 7?

[shshaw]

I'm having an issue in Firefox 7 where the Textareas show up almost as small as possible, expand to one line if text is put in and force to scroll for the rest. Works fine in Chrome & Safari.

Any idea what the issues could be related to?

[bgrins]

Do all the areas on the demo page have the same problem http://bgrins.github.com/ExpandingTextareas/?

I have checked in Firefox 6, 7, and 8 on Windows. What platform are you on? Are there any other JavaScript errors on the page?

[Zoramite]

I just tested in FF 7.0.1 on Ubuntu 11.10 and it was working as expected.

Do you have any add-ons installed that may be changing things?

[shshaw]

Shortly after posting, I got an alert that Firefox 8 was available (man, they are blazing through those updates!), but the update didn't fix anything on my page.

The demo pages show up correctly in FF8. On my page, I'm not getting any errors or warnings in the console. All other Javascript works as expected.

Here's a screenshot of what it's doing: http://cl.ly/2D1I1F432l191L0r0W1L The Keywords & Description fields should expand, but they show up less than 10px high until I type in it. Then it doesn't show up bigger than the text.

Perhaps this is a style issue? I notice that Expanding.js adds a "height: 100%;" and that may be causing issues with these text areas if they're not in a "tall" element.

[shshaw]

I've managed to isolate the issue to a CSS issue: white-space: normal, vs white-space: pre-wrap;

For some reason, the hidden pre.textareaClone is set to white-space: normal in Firefox but it's set to white-space: pre-wrap; in Chrome. Editing the DOM to make it white-space: pre-wrap fixes the resizing issue.

I will test if removing any other scripts fixes the issue, but it doesn't appear to be related to my page's styles as it's something that's placed on the element.

Any ideas?

[shshaw]

Got it!

In my CSS Reset (straight from HTML5 Boilerplate), I changed this line from: pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; } to pre { white-space: pre !important; white-space: pre-wrap !important; word-wrap: break-word; padding: 15px; }

For some reason, Firefox may be taking one of those values as invalid and resetting the Pre to "normal", even overriding the script's values.

Any ideas as to why that's happening? It's fixed with the !important override, but I'd like to see if another solution is available.

[bgrins]

Good catch on this. We definitely want it to work out of the box with html5 boilerplate. This is weird, because Firefox is reporting whitespace: normal by default. Your !important rule just overrides the fact that we are setting it to normal.

It happens to work on the demo page because we set the white-space property on textareas in the CSS on that page.

It may be safe to just assume that we want to always have white-space: pre-wrap;, at least in Firefox.

[bgrins]

Looks like white-space:normal behaves like pre-wrap on firefox (and IE7): http://reference.sitepoint.com/css/white-space. Because of this, I think we should set "white-space" to "pre-wrap" inside of the preCSS object, and take it out of the cloneCSSProperties object. The only issue is that in IE7, pre-wrap isn't supported - but I think it will just ignore the declaration and still work

[bgrins]

@shshaw, can you confirm that the current master branch is working now for you without your CSS hack you added in earlier?

[shshaw]

Confirmed!

I removed the !important, and the white-space property is being set to pre-wrap correctly.

Thanks for your help & quick response!