Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
RodolpheGohard opened this Issue Dec 9, 2015 · 9 comments

Comments

Projects
None yet
3 participants
@RodolpheGohard
Copy link

RodolpheGohard commented Dec 9, 2015

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.

@cvrebert cvrebert added css v3 labels Dec 9, 2015

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Dec 9, 2015

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Dec 9, 2015

Confirmed in Microsoft Edge:
msft-edge

Also confirmed in IE11.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Dec 9, 2015

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.

I'm not enough of a CSS person to know exactly why, but some poking around suggests it's so you get https://jsbin.com/goweruq/edit?html,css,output instead of https://jsbin.com/sihobo/edit?html,css,output
(I assume there are other cases besides <body> where this applies.)
CC: @mdo

@cvrebert cvrebert changed the title gradient mixin vertical-three-colors on <tr> doesn't render correctly on IE11 gradient mixin vertical-three-colors on <tr> doesn't render correctly on IE11 or Edge Dec 9, 2015

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Dec 9, 2015

Filed Edge/IE11 bug: https://connect.microsoft.com/IE/feedback/details/2110930/edge-ie11-gradient-background-image-on-tr-is-only-applied-to-first-td
Assuming the background-repeat: no-repeat turns out to be intentional, there's nothing further we can do. It's a bug in the browser itself.

@RodolpheGohard

This comment has been minimized.

Copy link
Author

RodolpheGohard commented Dec 10, 2015

thanks for the investigation. I guess I'll have to force background-repeat: no-repeat, then.

Aside of this, I'm a bit surprised by the default repeat behaviour, since we already have repeating-linear-gradient for that purpose. I tried browsing the specs but couldn't figure out where this repeating gradient behaviour comes from.

@RodolpheGohard

This comment has been minimized.

Copy link
Author

RodolpheGohard commented Dec 10, 2015

I've a suggestion: maybe we could set background-repeat: repeat-x instead of no-repeat for vertical gradients ? tried it with the examples you provided and it seems to give fine results.

RodolpheGohard pushed a commit to RodolpheGohard/bootstrap that referenced this issue Dec 10, 2015

@RodolpheGohard

This comment has been minimized.

Copy link
Author

RodolpheGohard commented Dec 10, 2015

I can make RodolpheGohard@36dc411 into a pull request if needed, not sure if I should include all the dist files though.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Dec 10, 2015

Pull requests shouldn't include dist files. But I'd advise waiting for @mdo to reply before opening the pull request.

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Sep 5, 2016

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team

@mdo mdo closed this Sep 5, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.