But they're there on the original in two browsers and gone from the original in two browsers.Look at the window name the "mode" is usually indicated (could be "RGB", "Grayscale", or "CMYK"), and it will also indicate whether or not the image has an ALPHA channel (the transparency channel). If I just re-Save for the Web with the original GIF, I get no edge pixels. As a final fix, I rotated the image 90° and saved the GIF. Even increasing the canvas size to display pixels that may be off of the document reveals nothing. Again, the pixels do not appear on any frame in the 12 frame animation when zoomed and viewed in Fireworks, Photoshop, or Graphic Converter. That means the poblem is in the interpretation of the animated GIF. This morning, I noticed the pixels even when just the image is displayed in Safari. To even that out, I set line height for the single line to zero. I noticed a slight difference in the box model between the browsers, and particularly in the default line-height.
I thought that perhaps the image was being tiled somehow even though backgrounds are set to "no-repeat". To maintain transparency I added 1 transparent pixel to each side of the transparent background making it 19 pixels square that fixed the appearance too. I gave the image a solid white background and that fixed the appearance. So far, I can get rid of the pixels several ways. It shows the different interpretations of the box and CSS as well as the pixels on Safari's and Chrome's GIF arrows. This last animation steps through aligned displays from Opera, Firefox, Chrome, and Safari. If I reload, I can get them to appear at the top and bottom.
In the third image, you can see a close up of the pixels that only appear on the animation in Safari and Chrome. I wanted the arrows to align, and the frame where they did just happened to not show the pixels. The frame that it's stopped at in the comparison shot is just after the dark pixels go away. The 17 pixel square animated GIF has a transparent background and is set as a background image in a div with a white background. I wanted some idea of how the browsers were interpreting the box model in case that was a problem. I took a screen capture of the two browser's into Photoshop so that I could color the 16 pixel padding on the top and bottom (rendered inside the border) as well as the 12 pixel horizontal offset called for in the background position of the images display. I opened the 12 frame GIF in Photoshop, Graphic Converter, and Firefox, looked for errant dark pixels, but there are none. If it was a dimensional reflective surface, I'd say we were seeing a reflection of each arrow as it passes by. In this animated capture, you can see a row of dark pixels appear each time an arrow sweeps past its upper edge in the Safari browser on the right. Each browser's interpretation of its 'box'-the div with padding-has a red border added in the CSS for this diagnostic experiment only.
MAKE BACKGROUND TRANSPARENT WITH GRAPHICCONVERTER MAC
This is an animated screen capture of a progress arrow as it appears in two overlapping Mac browsers: Firefox and Safari.
0 kommentar(er)
