Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #18504
Closed
Open
Issue created Dec 09, 2015 by Administrator@rootContributor

gradient mixin vertical-three-colors on <tr> doesn't render correctly on IE11 or Edge

Created by: RodolpheGohard

Hi,

when applying a vertical-three-colors gradient on a <tr> in IE11, I get a buggy display: the gradient does'nt extend to the full width of the <tr>.

Here is a demo:

<style type="text/css">
   /* GENERATED FROM LESS .gradiented {
    .vertical-three-colors(#cccccc, #e9e9e9, 5%, #e9e9e9);
    }*/
    .gradiented {
        background-image: -webkit-linear-gradient(#cccccc, #e9e9e9 5%, #e9e9e9);
        background-image: -o-linear-gradient(#cccccc, #e9e9e9 5%, #e9e9e9);
        background-image: linear-gradient(#cccccc, #e9e9e9 5%, #e9e9e9);
        background-repeat: no-repeat;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffcccccc', endColorstr='#ffe9e9e9', GradientType=0);
    }
</style> 

<table>
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
        <td>cell 4</td>
    </tr>
    <tr class="gradiented">
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
        <td>cell 4</td>
    </tr>
</table>

in this sample, running IE11, I only get the first cell to be filled. The situation doesn't happen if I remove the background-repeat: no-repeat; property, which makes me wonder why it's there to begin with.

Assignee
Assign to
Time tracking