Firefox horizontal scrollbar problem in version 36 and above (potential bug)
I run a forum that uses Invision Power Board as the forum software. In Firefox 35.1 and below, when replying to a thread or starting a new thread, text would be correctly displayed like this: -
http://i.imgur.com/woze0ip.jpg
In Firefox 36, once you hit the right hand edge of the box that you type your post into, rather than it automatically moving down to the next line, it just continues on to the right and a horizontal scrollbar appears, like this: -
http://i.imgur.com/xkVP5Ck.jpg
I have tried upgrading to the latest beta version of Firefox 37, but the problem remains. I have also tried restarting Firefox in safe mode, with all extensions disabled, but it's the same. As soon as I downgrade back to 35.1 again, it works fine.
Is this a bug in Firefox? Is there an advanced setting I can change somewhere so that this doesn't happen?
Thanks!
Chosen solution
Older versions of Firefox will ignore the white-space property. Other browsers should work (see the Browser Compatibility link above).
It sounds as though the style rules are associated with CKEditor. Since that could update and remove your changes, you might want to put them wherever Invision allows custom CSS, which could be a file named "custom.css" based on a little web searching.
.cke_skin_ips textarea { white-space: pre-wrap !important; } .cke_skin_ips textarea.cke_source { white-space: pre-wrap !important; }Read this answer in context 👍 1
All Replies (16)
Maybe it would help to set this in about:config: plain_text.wrap_long_lines -> true
Let's start with the basics;
Many site issues can be caused by corrupt cookies or cache.
- Clear the Cache and
- Remove Cookies
Warning ! ! This will log you out of sites you're logged in to.
Type about:preferences<Enter> in the address bar.
- Cookies; Select Privacy. Under History, select Firefox will Use Custom Settings. Press the button on the right side called Show Cookies. Use the search bar to look for the site. Note; There may be more than one entry. Remove All of them.
- Cache; Select Advanced > Network. Across from Cached Web Content, Press Clear Now.
If there is still a problem, Start Firefox in Safe Mode {web link} While you are in safe mode;
Type about:preferences#advanced<Enter> in the address bar.
Under Advanced, Select General. Look for and turn off Use Hardware Acceleration.
Poke around safe web sites. Are there any problems?
Then restart.
Some added toolbar and anti-virus add-ons are known to cause Firefox issues. Disable All of them.
finitarry said
Maybe it would help to set this in about:config: plain_text.wrap_long_lines -> true
Thanks for the reply, but it was already set as true.
FredMcD said
Let's start with the basics;
Thanks for the reply too, but unfortunately this didn't help. The only thing I've tried that works so far is downgrading back to Firefox 35.1.
I've called the big guys to help you. Good luck.
FredMcD said
I've called the big guys to help you. Good luck.
Thanks a lot, Fred! Much appreciated. :)
Is this a rich text editor area (i..e can have HTML code for formatting) or a normal text area like used on this forum?
I see a text resizer icon in the bottom right corner, so I assume that you can resize that text area. There might be JavaScript running that modifies the text area and that isn't working as expected.
What are the CSS rules for the text area and its containing (DIV) element? If this can happen then it is likely that there isn't a maximum width for the containing container.
cor-el said
Is this a rich text editor area (i..e can have HTML code for formatting) or a normal text area like used on this forum? I see a text resizer icon in the bottom right corner, so I assume that you can resize that text area. There might be JavaScript running that modifies the text area and that isn't working as expected. What are the CSS rules for the text area and its containing (DIV) element? If this can happen then it is likely that there isn't a maximum width for the containing container.
I'm afraid I can't answer all of your questions, but I'll try my best.
You can switch between 2 modes when making posts - a rich text mode and a "BB Code" mode where you have to manually add BB Code to format things. The issue occurs in both modes.
The resizer icon allows you to adjust the height of the box that you post in. This works in either mode and resizing the box makes no difference as far as this issue is concerned.
Your last question I can't answer unfortunately. I can create an account for you on my forum if you want to take a better look at this though.
We've had a couple other threads on issues with text entry in Firefox 36, in one case the space key didn't work and in another, the Enter key didn't start a new line, it just added a space. "Something" changed, but these symptoms are so disparate that it's hard to track it down...
jscher2000 said
We've had a couple other threads on issues with text entry in Firefox 36, in one case the space key didn't work and in another, the Enter key didn't start a new line, it just added a space. "Something" changed, but these symptoms are so disparate that it's hard to track it down...
Thanks for the reply. I'll happily set up an account on my forum for someone to use if they want to test this, if that helps.
What is the white-space rule for the textarea? Prior to version 36.0, Firefox apparently was ignoring this property for textarea controls.
https://developer.mozilla.org/docs/Web/CSS/white-space#Browser_compatibility
The native behavior is pre-wrap and using pre will prevent wrapping.
Similar thread where I got hands on: Word wrap problems in 36.0
Here's the relevant code: -
It seems that the pre/pre-wrap thing you mentioned is the issue. Could you tell me what changes I would need to make to make it work properly please?
The two instances of white-space: pre; would have to be changed to white-space: pre-wrap;
.cke_skin_ips textarea.cke_source { font-family: "Courier New",monospace; font-size: small; background-color: #FFF; white-space: pre; -> white-space: pre-wrap; } .cke_skin_ips textarea.cke_source { } .cke_skin_ips textarea { white-space: pre; -> white-space: pre-wrap; }
Thanks. The problem I have is that I don't know how to find the file or template where these changes should be made. How would I do that?
Also, would making this change affect users of other browsers, including older versions of Firefox?
Thanks again!
Chosen Solution
Older versions of Firefox will ignore the white-space property. Other browsers should work (see the Browser Compatibility link above).
It sounds as though the style rules are associated with CKEditor. Since that could update and remove your changes, you might want to put them wherever Invision allows custom CSS, which could be a file named "custom.css" based on a little web searching.
.cke_skin_ips textarea { white-space: pre-wrap !important; } .cke_skin_ips textarea.cke_source { white-space: pre-wrap !important; }
Thanks for the reply! With the help given here and over on Invision Modding, I was able to get this resolved.
For any others who have the same issue, you need to go into the Admin CP - Look & Feel - then select the affected skin and add the code in jscher2000's post above to the end of the ipb_ckeditor.css file and hit Save.