IE9 canvas size
481 views
Skip to first unread message
Joseph Greer
Mar 5, 2011, 8:05:38 PM3/5/11
to Raphaël
It seems that in ie9, a Raphael canvas's child elements are not
"clamped" to or "cutoff" at the edges of its canvas. See this website
for an example of what I am talking about:
http://www.irunmywebsite.com/raphael/additionalhelp.php?q=setSize#PAGETOP
Even though the rect should be cut off at 320x240, all 640x480 of it
is drawn. Has anyone else noticed anything similar and if so, a fix?
"clamped" to or "cutoff" at the edges of its canvas. See this website
for an example of what I am talking about:
http://www.irunmywebsite.com/raphael/additionalhelp.php?q=setSize#PAGETOP
Even though the rect should be cut off at 320x240, all 640x480 of it
is drawn. Has anyone else noticed anything similar and if so, a fix?
charles thomas
Mar 5, 2011, 10:16:05 PM3/5/11
to raph...@googlegroups.com
| Hi Joseph This works on IE9 and all browsers. It shrunk the canvas to 25%. It also shrunk everything to 25% with no loss of aspect ratio. I'm not sure if you need the latter. I also moved the div around that the Raphael canvas was based on to position the canvas in "small canvas" mode. http://www.irunmywebsite.com/raphael/scaleraphael.php The calls used were: paper.scaleAll(1) and paper.scaleAll(0.5) Zeven's excellent plugin again. Guy's please send me any plugins that you recently found useful. Regards Charles --- On Sat, 3/5/11, Joseph Greer <joseph...@gmail.com> wrote: |
|
Joseph Greer
Mar 6, 2011, 8:11:57 PM3/6/11
to Raphaël
Hey Charles,
Thanks for the reply. My issue is a bit more complicated than just
being able to scale everything down to the size of the canvas. The
problem is that I have a pretty complicated SVG I am working with and
I was expecting that any elements with coordinates outside the canvas
dimensions would be cutoff. For example, at one point, I simulate
zooming in the animation by scaling everything in the canvas. In all
other browsers this works perfectly, but IE9, nothing gets cut off at
the edge of the canvas so it looks completely wrong.
See the following for an example:
http://www.fashionbuddha.com/orcas/firstaid/ORCASApp/three.html
Thanks,
Joey
On Mar 5, 7:16 pm, charles thomas <charles...@yahoo.com> wrote:
> Hi Joseph
>
> This works on IE9 and all browsers.
>
> It shrunk the canvas to 25%. It also shrunk everything to 25% with no loss of aspect ratio.
>
> I'm not sure if you need the latter.
>
> I also moved the div around that the Raphael canvas was based on to position the canvas in "small canvas" mode.
>
> http://www.irunmywebsite.com/raphael/scaleraphael.php
>
> The calls used were:
> paper.scaleAll(1) and paper.scaleAll(0.5)
>
> Zeven's excellent plugin again.
>
> Guy's please send me any plugins that you recently found useful.
>
> Regards Charles
>
> --- On Sat, 3/5/11, Joseph Greer <josephdgr...@gmail.com> wrote:
Thanks for the reply. My issue is a bit more complicated than just
being able to scale everything down to the size of the canvas. The
problem is that I have a pretty complicated SVG I am working with and
I was expecting that any elements with coordinates outside the canvas
dimensions would be cutoff. For example, at one point, I simulate
zooming in the animation by scaling everything in the canvas. In all
other browsers this works perfectly, but IE9, nothing gets cut off at
the edge of the canvas so it looks completely wrong.
See the following for an example:
http://www.fashionbuddha.com/orcas/firstaid/ORCASApp/three.html
Thanks,
Joey
On Mar 5, 7:16 pm, charles thomas <charles...@yahoo.com> wrote:
> Hi Joseph
>
> This works on IE9 and all browsers.
>
> It shrunk the canvas to 25%. It also shrunk everything to 25% with no loss of aspect ratio.
>
> I'm not sure if you need the latter.
>
> I also moved the div around that the Raphael canvas was based on to position the canvas in "small canvas" mode.
>
> http://www.irunmywebsite.com/raphael/scaleraphael.php
>
> The calls used were:
> paper.scaleAll(1) and paper.scaleAll(0.5)
>
> Zeven's excellent plugin again.
>
> Guy's please send me any plugins that you recently found useful.
>
> Regards Charles
>
>
> From: Joseph Greer <josephdgr...@gmail.com>
> Subject: IE9 canvas size
> To: "Raphaël" <raph...@googlegroups.com>
> Received: Saturday, March 5, 2011, 5:05 PM
>
> It seems that in ie9, a Raphael canvas's child elements are not
> "clamped" to or "cutoff" at the edges of its canvas. See this website
> for an example of what I am talking about:
>
> http://www.irunmywebsite.com/raphael/additionalhelp.php?q=setSize#PAG...
> From: Joseph Greer <josephdgr...@gmail.com>
> Subject: IE9 canvas size
> To: "Raphaël" <raph...@googlegroups.com>
> Received: Saturday, March 5, 2011, 5:05 PM
>
> It seems that in ie9, a Raphael canvas's child elements are not
> "clamped" to or "cutoff" at the edges of its canvas. See this website
> for an example of what I am talking about:
>
>
> Even though the rect should be cut off at 320x240, all 640x480 of it
> is drawn. Has anyone else noticed anything similar and if so, a fix?
>
> --
> You received this message because you are subscribed to the Google Groups "Raphaël" group.
> To post to this group, send an email to raph...@googlegroups.com.
> To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.
> Even though the rect should be cut off at 320x240, all 640x480 of it
> is drawn. Has anyone else noticed anything similar and if so, a fix?
>
> --
> You received this message because you are subscribed to the Google Groups "Raphaël" group.
> To post to this group, send an email to raph...@googlegroups.com.
charles thomas
Mar 6, 2011, 8:23:35 PM3/6/11
to raph...@googlegroups.com
| Sorry Joseph I dont know. I had a few problems with IE9 already also. Charles |
--- On Sun, 3/6/11, Joseph Greer <joseph...@gmail.com> wrote: |
|
|
|
Joseph Greer
Mar 6, 2011, 8:32:46 PM3/6/11
to Raphaël
My guess is that it has something to do with the viewport or viewbox
of the root svg element created by Raphael since IE9 just introduced
SVG and probably does things a bit differently than Firefox/Safari/
Chrome. Aside from this, though, everything has behaved an order of
magnitude better in IE9 than IE8 so can't complain too much.
On Mar 6, 5:23 pm, charles thomas <charles...@yahoo.com> wrote:
> Sorry Joseph
>
> I dont know.
> I had a few problems with IE9 already also.
>
> Charles
> > To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.
of the root svg element created by Raphael since IE9 just introduced
SVG and probably does things a bit differently than Firefox/Safari/
Chrome. Aside from this, though, everything has behaved an order of
magnitude better in IE9 than IE8 so can't complain too much.
On Mar 6, 5:23 pm, charles thomas <charles...@yahoo.com> wrote:
> Sorry Joseph
>
> I dont know.
> I had a few problems with IE9 already also.
>
> Charles
> > For more options, visit this group athttp://groups.google.com/group/raphaeljs?hl=en-GB.
>
> --
> You received this message because you are subscribed to the Google Groups "Raphaël" group.
> To post to this group, send an email to raph...@googlegroups.com.
> To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.
>
> --
> You received this message because you are subscribed to the Google Groups "Raphaël" group.
> To post to this group, send an email to raph...@googlegroups.com.
sanojian
Mar 7, 2011, 7:20:35 AM3/7/11
to Raphaël
I have seen the same behavior. I have written a drawing tool for my
company and in IE9 users can just drag drawn objects off my Raphael
canvas and into the GUI. Not so cool. I was hoping a last minutes
bugfix would magically resolve my problem before the IE9 final release
or I will have to add *yet another* IE workaround.
company and in IE9 users can just drag drawn objects off my Raphael
canvas and into the GUI. Not so cool. I was hoping a last minutes
bugfix would magically resolve my problem before the IE9 final release
or I will have to add *yet another* IE workaround.
charles thomas
Mar 7, 2011, 10:05:34 AM3/7/11
to raph...@googlegroups.com
| I saw the same problem in the http://www.irunmywebsite.com/raphael/additionalhelp.php?q=eventprog#PAGETOP demo at the weekend when I was making IE9 work with stuff. It's fitting an extra line of buttons outside the code display area. Only in IE9! I'm waiting for the code fix because it's not possible to code it out (and to be honest I have not got the time) Charles --- On Mon, 3/7/11, sanojian <sano...@gmail.com> wrote: |
|
|
|
|
|
Dmitry Baranovskiy
Mar 7, 2011, 5:13:04 PM3/7/11
to Raphaël
Just add
svg { overflow: hidden; }
into your CSS.
This will fix a problem for IE9.
svg { overflow: hidden; }
into your CSS.
This will fix a problem for IE9.
Joseph Greer
Mar 7, 2011, 11:31:10 PM3/7/11
to Raphaël
sanojian
Mar 8, 2011, 2:26:47 AM3/8/11
to Raphaël
Great, thanks Dmitry! And my "*yet another* IE workaround" comment
was not aimed at Raphael but at developing applications for the web in
general.
On Mar 7, 11:13 pm, Dmitry Baranovskiy <dmitry.baranovs...@gmail.com>
wrote:
was not aimed at Raphael but at developing applications for the web in
general.
On Mar 7, 11:13 pm, Dmitry Baranovskiy <dmitry.baranovs...@gmail.com>
wrote:
charles thomas
Mar 8, 2011, 9:35:30 PM3/8/11
to raph...@googlegroups.com
| Works a treat! Thanks! --- On Mon, 3/7/11, Dmitry Baranovskiy <dmitry.ba...@gmail.com> wrote: |
|
|
|
|
|
sanojian
Mar 18, 2011, 6:30:02 AM3/18/11
to Raphaël
Now that IE 9 is officially released, they seem to have fixed the
problem. At least I am not seeing it anymore. It is much, much
faster as well.
My confidence in Internet Explorer is....increasing? I will have to
ponder this.
problem. At least I am not seeing it anymore. It is much, much
faster as well.
My confidence in Internet Explorer is....increasing? I will have to
ponder this.
Reply all
Reply to author
Forward
0 new messages