Opened 13 years ago

Last modified 13 years ago

#7771 confirmed Bug

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

Reported by: Machiel Owned by:
Priority: Normal Milestone:
Component: General Version: 3.5.3
Keywords: Firefox Cc:

Description

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

Attachments (1)

tc.html (1.1 KB) - added by Frederico Caldeira Knabben 13 years ago.
Test Case

Download all attachments as: .zip

Change History (8)

comment:1 Changed 13 years ago by 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 removed width and height attributes from there, opacity worked just fine... but probably seeing elements from the original (non-maximized) page through CKEditor is not what ChessSpider expect :)

Version 0, edited 13 years ago by typeof (next)

comment:2 Changed 13 years ago by 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?

comment:3 Changed 13 years ago by Frederico Caldeira Knabben

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

comment:4 Changed 13 years ago by 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?

comment:5 Changed 13 years ago by Machiel

Chrome and IE do not have this issue.

Is this a FF issue?

Would making CKEditor's position Fixed with width and height of 100% fix this?

Last edited 13 years ago by Machiel (previous) (diff)

Changed 13 years ago by Frederico Caldeira Knabben

Attachment: tc.html added

Test Case

comment:6 Changed 13 years ago by Frederico Caldeira Knabben

Keywords: Firefox added; opacity firefox removed
Status: newconfirmed

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.

comment:7 Changed 13 years ago by 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 :)

Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy