0

We are attempting to use background: linear-gradient() to get the following output. However, we are running into a problem where the css is not being applied to the following browsers.

Question:

How can we get it to work on all browsers?

Browsers with issues

  • Mac High Sierra Safari 11.1
  • IE11
  • Microsoft Edge 44.17763.771.0
  • Safari on iOS (v12)

What we tried

.box { 
  padding:20px;
  display:inline-block;
  border-right:2px solid #000;
  border-left:2px solid #000;
  background:
    linear-gradient(to left ,#000 10px,transparent 10px 30px,#000 0) top,
    linear-gradient(to right,#000 10px,transparent 10px 30px,#000 0) bottom;
  background-size:100% 2px;
  background-repeat:no-repeat;
}
<div class="box">
Some text inside
</div>
usernameabc
  • 662
  • 1
  • 10
  • 30
  • Look at https://stackoverflow.com/questions/26522101/linear-gradient-not-working-in-ie-11/26522234 – Oleg Oct 23 '19 at 18:26
  • You can use https://cssgradient.io/ just click the "Max Compatibility (IE 6+)" checkbox and it'll generate the code for you. There are several other similar tools out there – emmzee Oct 23 '19 at 18:33

1 Answers1

0

Double position color stops are not supported in IE/Edge and Safari < v13.

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Simply change your code as such:

background:
    linear-gradient(to left ,#000 10px,transparent 10px, transparent 30px, #000 0) top,
    linear-gradient(to right,#000 10px,transparent 10px, transparent 30px, #000 0) bottom;
Vishal Biswas
  • 401
  • 2
  • 8
  • i have found out the hard way....its basically not supported. https://caniuse.com/#feat=mdn-css_types_image_gradient_repeating-linear-gradient_doubleposition – usernameabc Oct 23 '19 at 19:58