RESOLVED DUPLICATE of bug 4270627258
"-webkit-transform: scale" draws seams between tiled images 
https://bugs.webkit.org/show_bug.cgi?id=27258
Summary "-webkit-transform: scale" draws seams between tiled images
Alexander Maryanovsky
Reported 2009-07-14 05:45:40 PDT
Tiled images with no space between them that are scaled using "-moz-transform: scale" will draw "seams" between the images. In the linked test page, 9 solid-color images are placed in a 3x3 grid with no space between them. After a few seconds, they will be scaled to twice their size and back. While they are scaled, you can see white (or whatever the body background color is) lines between the images. This issue, for example, prevents "transform: scale" from being used in applications like Google Maps, to implement continuous zoom.
Attachments
Add attachment proposed patch, testcase, etc.
Alexander Maryanovsky
Comment 1 2009-07-14 05:46:50 PDT
I meant "-webkit-transform", obviously. Just a copy/paste typo :-)
Zachary Johnson
Comment 2 2009-08-02 21:35:14 PDT
I can confirm this bug. Here is a simple test case where the "seams" or phantom vertical lines can be seen when content is scaled using CSS transforms: http://www.zachstronaut.com/lab/css-scale-tile-bug/bug.html
mkterra
Comment 3 2011-06-01 18:50:51 PDT
This seems to be fixed since I do not see seams in the example links, UNLESS I use my browser's zoom function. The latter is probably a separate issue though. I'm on Chrome 12.0.742.68 (Official Build 86550) beta-m, Webkit 534.30 (branches/chromium/742@87129), Windows XP.
mkterra
Comment 4 2011-06-01 18:55:46 PDT
Looks like this is a duplicate of Bug 42706, where some work was done.
Shane Stephens
Comment 5 2011-06-13 18:11:29 PDT
*** This bug has been marked as a duplicate of bug 42706 ***
Alexander Maryanovsky
Comment 6 2013-01-24 22:41:35 PST
I wonder how a bug report submitted earlier and with a small example, can be a duplicate of a bug report submitted later, and merely pointing to Google Maps as the example. Not very encouraging...
inbox
Comment 7 2013-02-18 04:16:11 PST
This bug DOES exist! If you take a look at dragthebag.com in chrome (expanded to the window size) you will see a 1px gap between the tiled images that make up the mall. I have tried everything to remove this one pixel gap without success. If the browser is scaled down this gap disappears. Settings inline-block, font-size to 0, various padding, etc... none of them removed this 1 pixel gap. I could make the margin-left -1px but it mis-aligns other various elements further down the mall. This problem doesn't exist in Firefox or on the iPad & iPhone. Really would love for this issue to be solved for Chrome.
Note You need to log in before you can comment on or make changes to this bug.