Linear-gradient or calc() not working in IE11

Question

I have a problem regarding the linear-gradient, IE11 and maybe calc() function.

This code snippet acts different on Chrome and IE11.

background: linear-gradient(to top right, transparent calc(50% - 1px), #ccc, transparent calc(50% + 1px));

I want it to look like Chrome version.
Does anyone have a solution?

score 1 · Answer 1 · answered May 04 '19 at 13:19

Here is another idea where you don't need to know the size of the div but you won't have transparency:

.box {
  background:
    linear-gradient(to top   right,transparent 49.8%,#fff 50%) top    -1px right -1px,
    linear-gradient(to bottom left,transparent 49.8%,#fff 50%) bottom -1px left  -1px,
    #ccc;
  background-size:100% 100%;
  background-repeat:no-repeat;

/* irrelevant styles */
  width:150px;
  height:150px;
  display:inline-block;
  vertical-align:top;
  border:1px solid;
}

<div class="box">
</div>

<div class="box" style="width:200px">
</div>
<div class="box" style="height:200px">
</div>

Similar question with other ideas: linear-gradient border modify

score 0 · Accepted Answer · answered May 03 '19 at 12:06

0

I found the problem. IE11 doesn't like the calc() function. I used instead of calc(50% - 1px) and calc(50% + 1px) absolute values that were half of the div size +-1.

answered May 03 '19 at 12:06

Nandra Mihnea

31
2
8

I suggest that if the solution works for you, you could mark is as answer so that it will be helpful for someone meets with the similar issue. – Jenifer Jiang May 06 '19 at 06:32
Yup, I did that as I just saw your comment... damn I need to start using stackoverflow on a daily basics. Thanks – Nandra Mihnea Nov 22 '19 at 08:59

Linear-gradient or calc() not working in IE11

2 Answers2