3 Replies Latest reply: Mar 10, 2013 6:57 PM by jpap RSS

    BUG: Rectangles inside FW symbols become blurry/misaligned

    groove25 Community Member

      There seems to be a problem with the use of Rectangles within Symbols in Fireworks CS6, CS5 and earlier.


      The problem is that they become blurry. More exactly, they become repositioned within the symbol—aligned to the half-pixel—and their edges become anti-aliased as a result. For example, here's a series of rectangles that I'd created on the canvas to visualize a set of color swatches:




      Here's the same set of rectangles after having been saved as a Symbol and imported into another document:




      At first I thought this was a problem with Symbols in general, but then I discovered that it only occurred with Rectangles—a.k.a. "rectangle primitives", which are a special kind of grouped vector object created using the Rectangle tool—and only when the contents of the Symbol in which they resided had a pixel width or height ending in an odd number (i.e., 1, 3, 5, 7 or 9).




      Here's what I've observed, in greater detail. Start with two Rectangles, 99 x 99 pixels—one with a stroke only, the other with a fill only. Select the first Rectangle and choose Modify > Symbol > Convert to Symbol, and then do the same for the second. Save the file. Everything looks OK, right?


      99px original.png


      Now close the file, and reopen it. Have a look at the thumbnail previews within your Document Library. They look a little... fuzzy, yes?


      99px stroke preview.png99px fill preview.png


      Click on the name of one of the symbols in the Document Library to open the Symbol Properties dialog, and then click OK. Now look on the canvas...


      stroke blurry.png


      Yikes. The symbol instance containing the stroked Rectangle (on the left) has become quite blurred. Now, back within the Document Library panel, click on the thumbnail preview of the other symbol to enter Edit Symbol mode, and then return to the document canvas...


      both blurry.png


      Yikes again. The symbol instance containing the fill Rectangle (on the right) has also become blurred—horizontally, in this case. They both look worse now.


      Note that it's not the instances nor their placement on the canvas that's the problem—you can move them anywhere on the canvas, and they'll still look just as bad—but the symbols themselves. Double click on one of the symbols to enter Edit Symbol mode and select the rectangle. Its X-Y position in the Properties panel will look normal, but if you open the Transform panel extension (http://www.senocular.com/fireworks/extensions/?entry=572), you'll see the real story: The rectangle has been re-aligned to the half-pixel.


      Symbol edit w_Transform.png


      Importantly, the trigger here isn't the dimensions of the rectangle, per se, but of the symbol contents as a whole. If the symbol contents have an even-numbered dimension, alignment remains crisp and pixel-perfect along that dimension; if the symbol contents have an odd-numbered pixel dimension, a blurry misalignment occurs. For example, here's a series of "even" rectangles (20 x 20 pixels) that, with their single-pixel spacing, comprise an odd-numbered selection (125px), shown before and after symbol conversion:


      6 objects - before+after.png


      Incidentally, the same problem reveals itself when you import these symbols into another document using the Import Symbols command within the Document Library options menu.


      THE FIX


      The patch for this bug, once it's occurred, is to edit the symbol. In Edit Symbol mode, select all objects—or just the misaligned Rectangle objects—and choose Modify > Snap To Pixel.


      6 objects - snapped.pngbefore + after snap.png


      The fly in the ointment here is that, in many cases, the original alignment is not preserved. The rectangles may now be misaligned in relation to other objects in the symbol, as well as to other objects on the canvas. Therefore, to finish the job, you may need to also nudge the rectangle(s) by a pixel horizontally or vertically using the keyboard arrow keys.


      The good news is that once a symbol has been fixed using Snap To Pixel, its alignment and clarity should remain fixed.




      The surest way to avoid this issue, of course, is to avoid including Rectangles in your symbols—not the geometric shape, but the grouped vector object as it's created by the Rectangle tool. Therefore, prior to converting a selection to a symbol, check for any Rectangles within the selection and ungroup them using the Modify > Ungroup command, which will convert them into simple paths, unaffected by this bug. (Chances are, by the time you're converting these objects to symbols, you won't need the fluid resizing or adjustable rounded corners that Rectangle objects offer; the trick will be remembering to perform this extra step.)




      Lastly, here's the bug report that I submitted to Adobe regarding this issue:


      Product name: Fireworks

      Product Version:

      Product Language: English

      Your operating system: Mac OS 10.6.8



      Concise problem statement: Rectangles within Symbols become blurry if the width or height of the symbol contents is an odd number (e.g., 21, 23, 25, 27, 29, etc.). The blurriness is caused by misalignment of Rectangles on the half-pixel within the symbol, and becomes apparent upon closing and reopening the document and either a) viewing the symbol's Document Library thumbnail preview, or b) clicking to view Symbol Properties or to Edit Symbol. It can also be observed upon Importing the symbol into the Document Library of another document.


      Steps to reproduce bug:

      1. In an open FW document, draw a Rectangle and set the width and/or height to an odd number (e.g., 99 x 99 pixels).
      2. Select the Rectangle and Convert to Symbol.
      3. Save and close the document.
      4. Reopen the document. In the Document Library, double-click the symbol name to open the Symbol Properties dialog, and click OK. (Or double-click the symbol preview to Edit, and then return to the document canvas.)

      Results: The Symbol instance appears blurry on the canvas. (The Symbol itself also appears blurry within Edit mode.)

      Expected results: The Symbol should appear as it was originally created, without a loss of clarity or change in alignment.


      Note that this bug can occur whether a rectangle's dimensions are even or odd; the determining factor is the dimensions of the symbol contents as a whole. However, the bug affects Rectangles only; it has not been observed with paths, ellipses, auto shapes, bitmaps, or groups.

      The Transform panel extension was used to view the precise pixel alignment of objects and determine the cause of the blurriness.


      For more information, including graphic demonstrations and workarounds, please see the following forum post: http://forums.adobe.com/thread/1073489?tstart=0


      This bug has also been observed in Fireworks 8 and CS5 on Mac OS 10.6.8 (Snow Leopard).




      Amazingly, this bug can also affect Symbol instances on the canvas that have been "broken apart". To see this for yourself, create a symbol like one of the preceding examples, select the symbol instance on the canvas and choose Modify > Symbol > Break Apart. Save and close the file, then reopen it. The "broken apart" instance on the canvas will now appear blurry/misaligned(!).

        • 1. Re: BUG: Rectangles inside FW symbols become blurry/misaligned
          Petros_ Community Member

          The world of Fireworks users thanks you, this is great information! A note to any FW devs that might see this: (1) thank you for existing. FW FTW! (2) It would be fantastic to have this bug fixed. Here's why:

          1. FW is for screen graphics, so pixel perfection matters. Snap to pixel is what FW is supposed to do by default.
          2. The ability to round corners on rectangles, and to edit the roundness of those corners later, is one of the (many) rad attributes of Fireworks. I can mockup an interaction with 20 or more pages/states quickly and then go back and refine assets once I've got it blocked out. But if creating a symbol means I lose corner editability, then my purpose (of having an element that I can edit once and to update all of its instances) is defeated.



          • 2. Re: BUG: Rectangles inside FW symbols become blurry/misaligned
            groove25 Community Member

            Thanks, Petros_!


            That's good input. If this issue is important to you, consider submitting your own bug report. Feel free to copy and paste from mine, if it helps. (Just be sure to verify all results on your own setup first.)


            Whenever possible, I'm trying to post bug reports on this forum in addition to submitting them to Adobe. Partially, this is to allow me to include graphics or go into slightly more detail, and partially it's to make bug reporting more transparent—to raise awareness of known issues among fellow users and reduce duplication of effort, to create a record, and to increase public visibility of these issues. It also allows for corrections or additions to be made by myself or other users.


            However, it's not a true bug reporting system. So we don't know whether the Fireworks team has looked at this yet, whether it has been or will be assigned to someone, or whether your comment on this thread will be read by anyone on the Fireworks team.


            Nevertheless, it is quite an investment of time tracking down a bug and writing it up like this, so I appreciate the kudos!

            • 3. Re: BUG: Rectangles inside FW symbols become blurry/misaligned
              jpap Community Member

              I just discovered this bug as well, on CS6.  Thanks for confirming it!


              I tried both workarounds (snap to pixel, ungroup rectangle) but neither appear to keep the size/position of my shapes as whole integers.  Am reluctant to drop the use of symbols; they're otherwise super-useful.


              Here's an interesting related example:

              • Create a 100x100px rectangle, using the vector rectangle tool.
              • Ungroup the rectangle (the workaround).
              • Convert the ungrouped rectangle to a symbol.
              • Confirm that the new symbol has dimensions 100x100px.
              • Edit the shape.
              • Transform the rectangle to 105x105px.
              • End shape editing mode.
              • The resulting symbol is now 106x106px.