X
Tap here to go to the mobile version of the site.

Support Forum

Firefox horizontal scrollbar problem in version 36 and above (potential bug)

Posted

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!

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

Additional System Details

Installed Plug-ins

  • NPRuntime Script Plug-in Library for Java(TM) Deploy
  • Next Generation Java Plug-in 11.31.2 for Mozilla browsers
  • NPWLPG
  • Shockwave Flash 16.0 r0
  • 5.1.31211.0
  • SumatraPDF Browser Plugin

Application

  • Firefox 36.0
  • User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:36.0) Gecko/20100101 Firefox/36.0
  • Support URL: https://support.mozilla.org/1/firefox/36.0/WINNT/en-US/

Extensions

  • Adblock Edge 2.1.8 ({fe272bd1-5f76-4ea4-8501-a05d35d823fc})
  • Add to Search Bar 2.8 (add-to-searchbox@maltekraus.de)
  • All-in-One Sidebar 0.7.25 ({097d3191-e6fa-4728-9826-b533d755359d})
  • azid - Amazon Zoom Image Downloader 0.9.3 (azid@craue.de)
  • Copy Link Text 1.7.1 (copylinktext@brett.zamir)
  • Download Panel Tweaker 0.2.3 (downloadPanelTweaker@infocatcher)
  • Duplicate in Tab Context Menu 1.0.9 (DuplicateInTabContext@schuzak.jp)
  • FireGestures 1.8.7 (firegestures@xuldev.org)
  • Imgur Uploader 1.0.6 (giorgio@gilestro.tk)
  • MEGA 2.0.219 (firefox@mega.co.nz)
  • Open in IE 1.4 (openinie@wittersworld.com)
  • Quick Context Search 1.5.2 (quickcontextsearch@pf)
  • Secure Login 1.0.6 (secureLogin@blueimp.net)
  • URL Link 2.04.3 ({139a120b-c2ea-41d2-bf70-542d9f063dfd})
  • ZenMate Security & Privacy VPN 4.1.7 (firefox@zenmate.com)
  • IDM CC 7.3.97 (mozilla_cc@internetdownloadmanager.com) (Inactive)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription: NVIDIA GeForce GTX 780 Ti
  • adapterDescription2:
  • adapterDeviceID: 0x100a
  • adapterDeviceID2:
  • adapterDrivers: nvd3dumx,nvwgf2umx,nvwgf2umx nvd3dum,nvwgf2um,nvwgf2um
  • adapterDrivers2:
  • adapterRAM: 3072
  • adapterRAM2:
  • adapterSubsysID: 29831462
  • adapterSubsysID2:
  • adapterVendorID: 0x10de
  • adapterVendorID2:
  • direct2DEnabled: True
  • directWriteEnabled: True
  • directWriteVersion: 6.3.9600.17415
  • driverDate: 2-5-2015
  • driverDate2:
  • driverVersion: 9.18.13.4752
  • driverVersion2:
  • info: {u'AzureCanvasBackend': u'direct2d', u'AzureFallbackCanvasBackend': u'cairo', u'AzureContentBackend': u'direct2d', u'AzureSkiaAccelerated': 0}
  • isGPU2Active: False
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • webglRenderer: Google Inc. -- ANGLE (NVIDIA GeForce GTX 780 Ti Direct3D9Ex vs_3_0 ps_3_0)
  • windowLayerManagerRemote: True
  • windowLayerManagerType: Direct3D 11

Modified Preferences

Misc

  • User JS: No
  • Accessibility: No
finitarry 251 solutions 3421 answers

Maybe it would help to set this in about:config: plain_text.wrap_long_lines -> true

Maybe it would help to set this in about:config: plain_text.wrap_long_lines -> true
FredMcD
  • Top 10 Contributor
4255 solutions 59591 answers

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.

Let's start with the basics; Many site issues can be caused by corrupt cookies or cache. * Clear the Cache and * Remove Cookies<br> '''''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, '''[https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode 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.'''

Question owner

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.

''finitarry [[#answer-698939|said]]'' <blockquote> Maybe it would help to set this in about:config: plain_text.wrap_long_lines -> true </blockquote> Thanks for the reply, but it was already set as true.

Question owner

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.

''FredMcD [[#answer-698941|said]]'' <blockquote> Let's start with the basics; </blockquote> 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.
FredMcD
  • Top 10 Contributor
4255 solutions 59591 answers

I've called the big guys to help you. Good luck.

I've called the big guys to help you. Good luck.

Question owner

FredMcD said

I've called the big guys to help you. Good luck.

Thanks a lot, Fred! Much appreciated. :)

''FredMcD [[#answer-699067|said]]'' <blockquote> I've called the big guys to help you. Good luck. </blockquote> Thanks a lot, Fred! Much appreciated. :)
cor-el
  • Top 10 Contributor
  • Moderator
17529 solutions 158478 answers

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.

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.

Question owner

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.

''cor-el [[#answer-699081|said]]'' <blockquote> 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. </blockquote> 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.
jscher2000
  • Top 10 Contributor
8758 solutions 71663 answers

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...

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...

Question owner

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.

''jscher2000 [[#answer-699120|said]]'' <blockquote> 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... </blockquote> 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.
jscher2000
  • Top 10 Contributor
8758 solutions 71663 answers

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

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: [https://support.mozilla.org/questions/1050456 Word wrap problems in 36.0]

Question owner

Here's the relevant code: -

http://pastebin.com/092mSzbL

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?

Here's the relevant code: - http://pastebin.com/092mSzbL 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?
cor-el
  • Top 10 Contributor
  • Moderator
17529 solutions 158478 answers

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;
}
The two instances of white-space: pre; would have to be changed to white-space: pre-wrap; <pre><nowiki>.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; }</nowiki></pre>

Question owner

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!

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!
jscher2000
  • Top 10 Contributor
8758 solutions 71663 answers

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;
}
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; }

Question owner

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.

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.