Opera CSS clipping bug

When clipping an element in Opera any underlaying content becomes visible, but does not allow user interaction. The clipped region is somehow still obstructing the content.

Bug is at least present in version 7.5x and the latest version 8 previews.

On a side note: the testpage also reveils a nice IE-thingy: the clipping is not applied through CSS which might make you believe that IE is not capable of clipping through CSS. However, when the same style is applied using javascript it works!

Test page Workaround is not included
Reported by: Tino Zijdel.

Opera | Reported on 13 January 2005.

This site is no longer maintained. I’m sorry, but it’s just too much work for too little return. You can continue to browse old bug reports, though.

Search reports by browser:

Atom RSS


(Add your own)

1 Posted by Moose on 13 January 2005 | Permalink

Clipping alters visibility (clipped contents become transparent), but not display, or stack context.

IMO, this is not a bug.


2 Posted by ppk on 13 January 2005 | Permalink

Maybe not, but all other browsers allow the user to click on the text link below the clipped area.

At the very least Opera differs significantly from all other browsers.

3 Posted by Philip Hazelden on 14 January 2005 | Permalink

I'd call it a bug, but it isn't obvious, given how vague the specs are:
"An element's clipping region clips out any aspect of the element (e.g. content, children, background, borders, text decoration, outline and visible scrolling mechanism - if any) that is outside the clipping region."

What exactly it means by 'clip' is impossible to determine. CSS3 will introduce 'crop' (http://w3.org/TR/2002/WD-css3-box-20021024/#the-crop ), which is similar to what non-Opera browsers do with clip, but slightly different: crop the edges off of something and they won't affect size (a more powerful display: none, from a purely visual perspective), but clip them off and they do (like visibility: nvsible). Also, everywhere else that I've seen them use the term 'clip' it's been to completely remove something (http://w3.org/TR/2002/WD-css3-box-20021024/#overflow ).

I'd say Opera's doing it wrong here according to what was meant by the specs, but it's not nearly clear enough.

4 Posted by Tino Zijdel on 14 January 2005 | Permalink

If it's not a bug in Opera than it's a bug in all other browsers ;)
Anyway, I've asked some persons involved in the CSS working group for clarification. In my opinion the spec is not too clear about it...

5 Posted by Jay Kamminga on 22 April 2005 | Permalink


I found that MSIE fails to apply clipping whenever you use a "," in the clipping string. Omitting the "," in your test page might get it to work initially.


6 Posted by adam bennie on 27 April 2005 | Permalink

I say this is a bug.

If you DON'T want the clipped area to be part of the stack, there is no obvious workaround.
If you DO want the clipped area to be part of the stack, you could easily implement this using a transparent div.

IMO the Opera interpretation of the standard is the least useful/practical/desirable implementation.

7 Posted by Mike Godin on 23 May 2005 | Permalink

There is a work-around. Set the z-index of the image to a negative number. If you have on-click events, etc, then you must layer a same-sized div with a transparent background over the image, and declare the same events for the div as the image. Please note that if the image is inside a div, that div must not have it's z-index set in Opera, or this method fails. However, in Firefox, the container div must have its z-index set, or the image is hidden behind it, even if it is transparent.

8 Posted by Gerard Talbot on 30 May 2005 | Permalink

Regarding comment #5:
MSIE fails to apply clipping whenever you use a "," in the clipping string. Omitting the "," in your test page might get it to work initially.

"User agents must support separation with commas, but may also support separation without commas, because a previous version of this specification was ambiguous in this respect."

I'd say we have another MSIE bug here.

9 Posted by AoE III on 7 March 2006 | Permalink

In fact there are just different ways of comprehension with W3C recommandations. But I think that the Opera's choice to obstruct content with hidden part of image is not very logical.

10 Posted by David Storey on 14 October 2007 | Permalink

Opera (and Safari 3) now work as te test case expects.