Vertical scrollbar height in Safari

I'm also facing the same problem. However, I did find out that if you resize the safari window or click the "Source" or "Maximize the editor size" buttons the editor corrects itself. Maybe this might give some one a hint on producing a work around for this.

DJ

I also have that issue and was on here looking to see if anyone had a fix for it yet. This also happens when using the latest Google Chrome Beta as well, I'm guessing they both share the same rendering engine.

Anyone know how to fix this?

Well, one month later it appears there is still no fix for this. It used to be only in the latest Safari Beta and Chrome Beta but Google has now released a non-beta update and this is happening to all FCK Editors I've installed on every website (when viewing with these browsers).

Anyone know how to correct this bug? I'm quite certain it's a WebKit rendering issue.

I've noticed this doesn't happen on the new CK Editor beta, however I'm still waiting for a Release Candidate to start testing out.

Thanks to anyone that can help

Am experiencing same issue in Chrome 2 and Safari 4 Beta. Is there any workaround available for this issue?

Thanks,

Kapil

I have the same problem too.

Some help would be great.

Thanks

I've also noticed that problem with the recently-released Safari 4 and the newest version of Google Chrome and was able to find a (somewhat ugly) workaround.

From the context of the page including the FCK editor instance, you can run the following JavaScript:

<script>
  document.getElementById('editor___Frame').contentDocument.getElementById('xEditingArea').style.height = '100.1%';
  setTimeout(function() { 
    document.getElementById('editor___Frame').contentDocument.getElementById('xEditingArea').style.height = '100%'
  }, 100); 
</script>

This code should run after the FCK editor has finished loading. To execute it automatically after FCK is initialized, define the following function:

<script>
function FCKeditor_OnComplete( editorInstance ) {
      var fck_iframe = document.getElementById('editor___Frame');
      var fck_editing_area = fck_iframe.contentDocument.getElementById('xEditingArea');
      fck_editing_area.style.height = '100.1%';
      setTimeout(function() {fck_editing_area.style.height = '100%'}, 100); 
}
</script>

This works for our site with a single FCK instance, but we haven't extensively tested it -- depending on your installation, it's possible that the iframe ID or the timeout might have to be adjusted. But until someone comes up with a proper solution, the workaround might hopefully be of use to some people.

The first code part works very well.

Thanks a lot.

PD: I have to remove the ; in the middle of two lines because it was generating an error.

jorgegrajales090 wrote:PD: I have to remove the ; in the middle of two lines because it was generating an error.

Great! Thanks for catching the typo -- I fixed the first code sample.

Hi guys - I managed to get this to work by allowing the last bit of script in /FCKEditor/editor/fckeditor.html to run in Chrome and Safari (the bit about iframe resizing). Just changed the if statement at the top of the below extract, all other code unaltered... see if this does the trick for you:

// Run this now for most browsers as of Chrome 2 and Safari 4 probs
//if ( FCKBrowserInfo.IsGecko && !FCKBrowserInfo.IsOpera )
if ( !FCKBrowserInfo.IsIE && !FCKBrowserInfo.IsOpera )
{
   window.onresize = function( e )
   {
      // Running in Chrome makes the window receive the event including subframes.
      // we care only about this window. Ticket #1642.
      // #2002: The originalTarget from the event can be the current document, the window, or the editing area.
      if ( e && e.originalTarget !== document && e.originalTarget !== window && (!e.originalTarget.ownerDocument || e.originalTarget.ownerDocument != document ))
         return ;

      var oCell = document.getElementById( 'xEditingArea' ) ;

      var eInnerElement = oCell.firstChild ;
      if ( eInnerElement )
      {
         eInnerElement.style.height = '0px' ;
         eInnerElement.style.height = ( oCell.scrollHeight - 2 ) + 'px' ;
      }
   }
}

Thanks for providing this workaround. It's working fine for me as well.

This fix is problematic.

When I add this:
if ( !FCKBrowserInfo.IsIE && !FCKBrowserInfo.IsOpera )...
Windows chrome fails to launch edit window completely.

When I add:
if ( FCKBrowserInfo.IsGecko && !FCKBrowserInfo.IsOpera || FCKBrowserInfo.IsMac==true && FCKBrowserInfo.IsSafari || !FCKBrowserInfo.IsMac==true && FCKBrowserInfo.IsSafari)...
Windows chrome fails, Mac safari loads the content without a bad render of the content. Windows safaris works.

I think chrome identifies or is identified by fckeditor as IsSafari... So any fix for safari seems to be breaking chrome on Windows.
So I end up with this logic on the window render issue - bad luck safari on windows users.
if ( FCKBrowserInfo.IsGecko && !FCKBrowserInfo.IsOpera || FCKBrowserInfo.IsMac==true && FCKBrowserInfo.IsSafari)

The only problem now is that when safari 4 starts up an editor for the first time - it is not active so can not type until either view source and return, or reload window - it is really weird...

Any more ideas?

aaj wrote:

jorgegrajales090 wrote:PD: I have to remove the ; in the middle of two lines because it was generating an error.

Great! Thanks for catching the typo -- I fixed the first code sample.

I can't seem to get this to work on mac browser... but the other one is partial fix.

//if ( !FCKBrowserInfo.IsIE && !FCKBrowserInfo.IsOpera )
if ( FCKBrowserInfo.IsGecko && !FCKBrowserInfo.IsOpera || FCKBrowserInfo.IsMac==true && FCKBrowserInfo.IsSafari)
{
.....

I can confirm this code works too.

function FCKeditor_OnComplete( editorInstance ) {
      var fck_iframe = document.getElementById(editorInstance.Name+'___Frame');
     alert(fck_iframe);
      var fck_editing_area = fck_iframe.contentDocument.getElementById('xEditingArea');
      fck_editing_area.style.height = '100.1%';
      setTimeout(function() {fck_editing_area.style.height = '100%'}, 100);
}

Thanks for the tip.

If anyone has found a better solution to this problem - let us know...
From what I can tell we will probably have to live with it in Safari and chrome.

There is always one browser that breaks huh...

hirnlego wrote:There's a strange issue with the editor vertical scrollbar in Safari. See attachment.
When the page is loaded, the scrollbar height is half of the editor window. As soon as I click into the editor, it adjusts itself to the right height.
It seems to me that the issue is independent from the editor's content (which, by the way, is properly formatted).
This happens with FCK 2.6.4 and Safari 4 beta (it also happens on the latest Safari 3.x though).
Everything's fine with Firefox, IE and Chrome.

This problem persists for OS X Safari. and Chrome.

+1 on this problem too. Seeing it on every site that uses FCKEditor, including my own.

Synchro wrote:+1 on this problem too. Seeing it on every site that uses FCKEditor, including my own.

I guess as more people move to safari and chrome we will get a helping hand on the fix. It appears to be a platform issue for me when it comes to the helpful fixes, I can get windows safari to work but not both (windows / OS X) due to chrome bug having same issue.

btw: the fckeditor.net/demo shows the bug in safari for me...

markosimic wrote:I can confirm this code works too.

function FCKeditor_OnComplete( editorInstance ) {
      var fck_iframe = document.getElementById(editorInstance.Name+'___Frame');
     alert(fck_iframe);
      var fck_editing_area = fck_iframe.contentDocument.getElementById('xEditingArea');
      fck_editing_area.style.height = '100.1%';
      setTimeout(function() {fck_editing_area.style.height = '100%'}, 100);
}

Thanks for the tip.

I have had this page bookmarked and came here today after such a long time. Finally, to my satisfaction the above code also works for me.
Thanks a lot guys!

In what file do we need to add this function FCKeditor_OnComplete?

oceanicdj wrote:

markosimic wrote:I can confirm this code works too.

function FCKeditor_OnComplete( editorInstance ) {
      var fck_iframe = document.getElementById(editorInstance.Name+'___Frame');
     alert(fck_iframe);
      var fck_editing_area = fck_iframe.contentDocument.getElementById('xEditingArea');
      fck_editing_area.style.height = '100.1%';
      setTimeout(function() {fck_editing_area.style.height = '100%'}, 100);
}

Thanks for the tip.

I have had this page bookmarked and came here today after such a long time. Finally, to my satisfaction the above code also works for me.
Thanks a lot guys!

Does it work for you on OSX + Windows? And what file did you insert this code to?

Please, note that I've attached two weeks ago I attached a proposed patch to the ticket handling this http://dev.fckeditor.net/ticket/3053

So anyone that cares about this should try to use that patch (remember to recompress the source files after applying the patch)

Dear All,

I have been having the same problem on chrome, so thanks for the solution. However I found that while the proposed change to fckeditor.html fixed the problem, it then caused a similar problem to appear when they collapsed the toolbar.

You therefore also need to make the following change to fcktoolbarset.js

FCKToolbarSet.prototype._ChangeVisibility = function( collapse )
{
this._Document.getElementById( 'xCollapsed' ).style.display = collapse ? '' : 'none' ;
this._Document.getElementById( 'xExpanded' ).style.display = collapse ? 'none' : '' ;

// Run this now for most browsers as of Chrome 2 and Safari 4 probs (see also change to fckeditor.html)
//if ( FCKBrowserInfo.IsGecko )
if ( !FCKBrowserInfo.IsIE && !FCKBrowserInfo.IsOpera )
{
// I had to use "setTimeout" because Gecko was not responding in a right
// way when calling window.onresize() directly.
FCKTools.RunFunction( window.onresize ) ;
}
}

Hope this helps ...