'Maximize' in container with Opacity makes container disappear (FF)

[Machiel]

Example: ​http://tvz.myhomework.nl/ckeditor_problem.html

The simple container has opacity (CSS3) set. When you click the Maximize button, the entire container disappears, leaving only the background left. When I remove the opacity from the container, the Maximize button works fine.

CKEditor is version 3.5.3. I am using Firefox 4.01. Internet Explorer 9.0 seem to work okay.

Apparently FF3.6 has the same issue, see also ​http://cksource.com/forums/viewtopic.php?f=6&t=22363

[typeof]

Note for the developers: this problem is related to the fact that a size of the body element is set to (0, 0).

When I changed the width and height attributes to some positive value e.g. 600px, opacity worked just fine... but probably seeing elements from the original (non-maximized) page through CKEditor is not what ChessSpider expects :)

[Machiel]

I can make the Textarea opaque. However not perfect, this work-around will help me continue until a better fix is found.

Do you have a suggestion as to how I can remove the width and height attributes from the body element, without affecting the rest of the website?

[Frederico Caldeira Knabben]

@typeof, thanks for the tips, but can you tell us more precisely what you did to solve the problem? Thanks!

[typeof]

@fredck

Well actually I didn't solve it.

1. Go to ​http://tvz.myhomework.nl/ckeditor_problem.html
2. Click maximize icon - the whole page becomes black
3. Open Firebug, go to HTML tag, choose body element
4. Select styles tab on the right side - you'll see that width and height are both 0
5. Change their value to e.g. 600px
6. Now you can go to the div#content element and play with opacity - works ok

Code related to this is in maximize plugin, starting at line 196..

I don't know how resolve this, especially in CKEditor's way.. Maybe absolutely positioned background div behind CKEditor that is hidden when editor is not maximized?

[Machiel]

Chrome and IE do not have this issue.

Is this a FF issue?

[Frederico Caldeira Knabben]

Test Case

[Frederico Caldeira Knabben]

I've attached the TC for local tests.

This is certainly a FF issue, because this behavior has no relation with the element opacity.

I've investigated the part of the code related to this. It is line 199 of the maximize plugin​. It sets overflow:hidden to body. @typeof, I had no difference with FF4 when removing width/height; only when removing this overflow clause.

We have that code there to hide the page scrollbars when the editor is maximized. It worked for me when commenting it, but then scrollbars are then visible.

[typeof]

Yeah, removing overflow:hidden works in FF 3.6 too.

However I made a mistake in my first comment - do not remove width and height, set them to some positive value. When I set them to 600px, the div's opacity worked fine in FF 3.6 (without touching overflow property).

This could be potentially useful if you'd prefer to leave overflow:hidden... unless it doesn't work in FF 4 :)