Bug 34392
Summary: | background (gradient) on tr is repeated on each td | ||
---|---|---|---|
Product: | WebKit | Reporter: | Gidon <gjunge> |
Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
Status: | RESOLVED DUPLICATE | ||
Severity: | Normal | CC: | bdredre, dbates, robin, senorblanco |
Priority: | P2 | ||
Version: | 528+ (Nightly build) | ||
Hardware: | PC | ||
OS: | Windows 7 |
Gidon
I tried to apply a horizontal linear background gradient to a table row:
tr { background: -webkit-gradient(linear, left top, right top, color-stop(0.0, white), color-stop(0.5, #E8E8E8), color-stop(1.0, white)); }
The row has a few cells, and unfortunately the gradient gets repeated on each cell, instead of the whole row.
Firefox 3.6 does render correctly using the following CSS rule:
tr { background: -moz-linear-gradient(left top , white, #E8E8E8, white) repeat scroll 0 0 transparent; }
According to what I've read the same issue goes for background images on a table row, although I cannot confirm this.
Attachments | ||
---|---|---|
Add attachment proposed patch, testcase, etc. |
Gidon
Btw. checked it on Safari 4.0.4 (webkit 531.21.10) although that selection was unavailable when entering the bug.
Also checked it on Chrome 4.0.249.78
Alexey Proskuryakov
See also: bug 9268.
Daniel Bates
This issue is resolved with the patch for bug #9268.
Robin Whittleton
The patch for bug #9268 was reverted it seems. I filed bug #58236 on this issue which I guess is a dupe of this bug, but this is definitely not fixed (in latest released Safari and Chrome on OSX 10.6 as of time of writing).
Daniel Bates
*** Bug 58236 has been marked as a duplicate of this bug. ***
Daniel Bates
*** This bug has been marked as a duplicate of bug 9268 ***
Robin Whittleton
Fwiw, bug #9268 is titled 'Quirksmode' but I’m seeing this issue in standards mode as well.
Robin Whittleton
Sorry, I’m an idiot, just realised that meant quirksmode.org. Ignore me.
bdredre
This bug seems to have reappeared. Using the following code:
<html>
<body>
<table width="100%">
<tr style="background: -webkit-linear-gradient(left, #CFC, #FFF);">
<td>This is a Chrome row</td>
<td>Something</td>
<td>Another thing</td>
</tr>
<tr style="background: linear-gradient(to right, #CFC, #FFF);">
<td>This is a Firefox row</td>
<td>Something</td>
<td>Another thing</td>
</tr>
</table>
</body>
</html>
This renders properly using Firefox but the gradient for the table row repeats across each child <td> using Chrome Version 22.0.1229.94 m