Opened 9 years ago

Last modified 9 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 9 years ago.
Test Case

Download all attachments as: .zip

Change History (8)

comment:1 Changed 9 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 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 :)

Last edited 9 years ago by typeof (previous) (diff)

comment:2 Changed 9 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 9 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 9 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 9 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 9 years ago by Machiel (previous) (diff)

Changed 9 years ago by Frederico Caldeira Knabben

Attachment: tc.html added

Test Case

comment:6 Changed 9 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 9 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 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy