Bug 27258 - "-webkit-transform: scale" draws seams between tiled images
Summary: "-webkit-transform: scale" draws seams between tiled images
Status: RESOLVED DUPLICATE of bug 42706
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac (Intel) OS X 10.5
: P2 Normal
Assignee: Nobody
URL: http://www.maryanovsky.com/sasha/scal...
Keywords:
Depends on:
Blocks:
 
Reported: 2009-07-14 05:45 PDT by Alexander Maryanovsky
Modified: 2013-02-18 04:16 PST (History)
3 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Alexander Maryanovsky 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.
Comment 1 Alexander Maryanovsky 2009-07-14 05:46:50 PDT
I meant "-webkit-transform", obviously. Just a copy/paste typo :-)
Comment 2 Zachary Johnson 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
Comment 3 mkterra 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.
Comment 4 mkterra 2011-06-01 18:55:46 PDT
Looks like this is a duplicate of Bug 42706, where some work was done.
Comment 5 Shane Stephens 2011-06-13 18:11:29 PDT

*** This bug has been marked as a duplicate of bug 42706 ***
Comment 6 Alexander Maryanovsky 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...
Comment 7 inbox 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.