css overflow is not working properly

Question

So I am writing a script for a live drawing area. It is a work in progress right now, but here is the css for the area:

#canvas{
    background-repeat: no-repeat;
    cursor:none;
    overflow:hidden !important;
    margin-top:50px;
    width:400px;
    height:300px;
    border:1px #000 solid;
}

Now clearly, with the important tag on overflow:hidden, anything outside the 400x300 box that has to do with drawing should not show, but it does!!!

here is a jsfiddle so you can see all the code!

How you can see what I mean:

Just click on the thing at the top that says paintbrush and follow the instructions in the p tag for drawing. Then go outside of the box and see how it continues to draw.

note:

I use $('#canvas').prepend(content) to get the drawing into the drawing area, so it makes no sense that it would show up in areas outside it when there is an overflow:hidden. any ideas?

Ivan Chernykh · Accepted Answer · 2013-06-23 08:11:16Z

2

Weird , but it helps: add position:relative to #canvas stylesheet:

#canvas {
  /* ... */ 
  position: relative;
  /* ... */ 
}

(JSFiddle: http://jsfiddle.net/HEnuj/7/)

I'm not CSS specialist so i have no logical explanation , except of something like "if some elements has position:absolute relatively to their parent so parent must be position:relative" , thats what i remember.

answered Jun 23, 2013 at 8:11

Ivan Chernykh

42.2k13 gold badges136 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ivan Chernykh Over a year ago

@RyanSaxe how many dots you can draw? is browser crashes sometimes?

Ryan Saxe Over a year ago

You can draw a lot, but the more you draw, the slower they come in...I'm not sure how to deal with that yet

Ivan Chernykh Over a year ago

@RyanSaxe i think it is because they are dom elements actually , even they are "empty" nodes they do eat memory. may be you should try Canvas API ?

Ryan Saxe Over a year ago

No, I want to do this on my own, it's a project I gave myself. I thought remove would clear it though...

Collectives™ on Stack Overflow

css overflow is not working properly

How you can see what I mean:

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

How you can see what I mean:

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related