Flex Canvas bug when it is zoomed in and “horizontalCenter = 0”

Recently I came across a Flex bug when working on canvas. If you have a canvas with an object centered inside ( horizontal or vertical, it’s the same ) and scale this object the result is that the canvas will clip left and top its contents!
To understand what I mean see this example and try to scale the image:

Get Adobe Flash player

And this is the code used:

< ?xml version="1.0" encoding="utf-8"?>
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundAlpha="0">
   <mx:number id="scale">1</mx:number>
   <mx:vbox horizontalCenter="0" verticalCenter="0">
      <mx:hbox width="100%" horizontalCenter="0">
         <mx:label text="Zoom" /><mx:hslider value="{scale}" change="{scale = HSlider(event.target).value}" width="100%" />
      <mx:canvas width="200" height="200"
               backgroundColor="#EEEEEE" borderColor="#666666"
               borderStyle="solid" verticalCenter="0" horizontalCenter="0" >
         <mx:image id="image" source="@Embed('../assets/test.png')" scaleX="{scale}" scaleY="{scale}"
                 verticalCenter="0" horizontalCenter="0" />

As you can see once the image is scaled and it’s bigger that its parent, you wont be able to see it top left corner anymore. This is an annoying bug for me!

Later I found that someone opened a ticket in the Flex bug management system here: http://bugs.adobe.com/jira/browse/SDK-13009
A couple of days ago I received a notification that the bug has been closed… and incredible they closed it as NOT A BUG!
I can understand that finding the bug in a file with 5000 and more lines of code it’s not easy and can cause horrible headache, but the reason they gave it’s nosense! It’s completely a different thing that the reason of this bug.

Moreover what’s the connection between flash and html?

Flex have been designed since the 1.0 version as a framework for building RIA (Rich Internet Applications).
A RIA have to behave as a desktop application that runs using the web browser. One of the advantages of Flex agains Ajax is that the first technology provide to the user a behaviour which is much more similar to desktop applications that the one provided using HTML+Javascript. And so my questions is: why should Flex behave like HTML when one of its most important features is to be different from HTML ?
Flex behaves like other SDKs used to develop desktop apps in many situations which are much less important than the one hilighted above. So why close this bug (yes. it is a bug) providing as explanation that it is correct because it behaves like HTML ?

  • Alessandro,
    Can you provide a little bit more detail on the “bug” you are seeing. Are you saying that a canvas should scale the object in a different way, pinned top/left?
    I may have misunderstood the issue here, please help me understand.
    Happy to help,
    Ted 🙂

  • Hi Patrick, I mean exactly the same thing as described in the bug page:

    The more you zoom into the document, the less of the left-hand side of the document is scrollable

  • Finally after your comment the incorrect behaviour when scrolling the content with xScale, yScale > 1 applied placed inside mx:Canvas became obvious to me…
    Do you witness this behavior in Flex 3 SDK as well? May be Flex 3 SDK fixes this issue by chance 😉

  • Yes, this bug is reproducible also in Flex 3 current public beta.

  • Don Pedro

    To be honest, I think the behavior you describe as a bug is the correct and expectable behavior. The origin of a zoom on a DisplayObject is as default in the measured center of the object. If you want it to scale otherwise you should adjust the originX/originY properties of the object. Another way could be to use the scrollRect property… but all of this is very well documented in the API docs, so Im sure you can figure this out for yourself.
    I agree with the Adobe team that this is not a bug.

  • Alessandro Crugnola

    This doesn’t matter with the object scale. That’s only an example. Even if I place an object without scaling but larger than the parent canvas (and vertical/horizontal centered) I got the same behavior, and this is definitively a bug for me.
    I don’t expect flex acts like html.

  • I’m the one who reported that bug to Adobe…
    This is funny because I reported several bugs throughout the Flex 3 Beta – and all of them are marked as “not a bug” – and I’ve found blog posts on EVERY bug I reported now with people vocally complaining about it.
    I agree wholeheartedly that this is a bug. They should at LEAST have a mode you can set where it behaves this way… perhaps something like FlexLib can build an alternate canvas or container of some sort that has the proper behavior that you can use at runtime.

  • Gireesh

    I has the same issue, I thought there is some thing I am doing wrong. Later I moved from Canvas to Box, to get this issue resolved.

  • Parag Kelji

    Well what I figured out from this behaviour is that the bug is not in the zooming or positioning of image on the canvas, but it is in maintaining the scroller positioning.
    The scrollers should be positioned at the center when you zoom in towards the center.

  • arrens

    i don’t think this is a bug. accept that it works this way.

  • Parag Kelji

    Arrens, open your eyes and brain to accept the truth. A bug is a bug and you can’t deny it.

  • Jason Y. Kwong

    I just ran into this issue and found your blog. I agree that this is NOT a bug. If you read through Corey Lucier’s explanation in the bug report, it makes perfect sense. Consider the simple case of a Canvas where you explicitly place a child at coordinates (-10,-10). How do the scrollbars behave? The basic scrolling model will not take you beyond (0,0) into negative coordinates. The top-left portion of the child will always be clipped.

  • alex m

    try to set horizontalCenter and verticalCenter to null when scaled image is bigger than area. Hope it help

  • Hans Muller

    Although I don’t this is a bug, I do think Gumbo lacks support for controlling the viewport’s location when it’s smaller than the space allocated by the FxScroller. I’ve updated the bug report with a suggested enhancement: http://bugs.adobe.com/jira/browse/SDK-13009

  • Hello,
    I encounter the same problem with a panel centered in the page.
    When I reduce the browser window, the panel moves to the left and part of the window disappears. The HorizontalScroll appears and permits de scroll to the right, but not to the left to see the hiddent part of the Panel!

  • zgui

    bug or not bug, this is pretty ennoying problem to not be able to set minScrollPosition as a negative value, it would just solve everything.
    I browse the ScrollBar.as for a while now, and I still can’t get how it finally do its job…
    Actually, the case with a “smart zoom” (modifying x and y value of the content, sometimes negatively) is a nightmare, as the scrollBar appears only when bottom/right corner is out of bounds, and if you try to set x/y to 0, then move scrollposition the opposite value of those coordinate (to replace the content at the right place), it is such a mess with all properties (x,y,scales…), that it never works correctly all along…
    I’m kind of screwed right now with my project.
    Does anybody has found a solution since this problem was discover, 2 years ago ?