0

So I noticed clip-path is not supported by ie/edge. I've read a solution that will work if you convert it to using svg in the jsx instead. However this does not seem to work either.

The jsx code in app.js

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="app">
      <svg width="0" height="0">
        <clipPath id="myclippath" clipPathUnits="objectBoundingBox">
          <polygon points="0.50 0.50, 1.00 0, 1.00 1.00, 0 1.00, 0 0" />
        </clipPath>
      </svg>
      <div className="div-intro-bottom" />
    </div>
  );
}

css

/*--------------------------- Reset ---------------------------*/
html, body, div, span, applet, 
object, iframe, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

h1 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 3.2rem;
  vertical-align: baseline;
}

h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 2.4rem;
  vertical-align: baseline;
}

h3 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.872rem;
  vertical-align: baseline;
}

h4, p, a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.6rem;
  vertical-align: baseline;
}

a:link {
  color: (internal value);
}
a:visited {
  color: (internal value);
}
a:link:active {
  color: (internal value);
}
a:visited:active {
  color: (internal value);
}

h5 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.328rem;
  vertical-align: baseline;
}

h6 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.072rem;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html,
body,
#root {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Roboto, Arial, sans-serif;
  height: 100%;
  font-size: 62.5%;
  min-height: 100%;
}

*, *::before, *::after {
  box-sizing: inherit;
  -webkit-box-sizing: inherit;
}

img {
  width: 100%;
}
/*-------------------------- Desktop --------------------------*/
.div-intro-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  clip-path: url(#myclippath);
  /* clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0); */
}

https://tukrk.csb.app/ <- works on chrome/firefox, but not on ie/edge. What am I missing?

Edge Info:

  • Microsoft Edge 44.18362.449.0
  • Microsoft EdgeHTML 18.18363

IE Info: Version 11

code in sandbox - https://codesandbox.io/s/clip-path-with-ieedge-support-tukrk?file=/src/App.js

I was trying the same solution as was provided here, but not having any luck: Easiest way to convert polygon clip-path to Microsoft Edge supported "clippath" svg?

Fiddle Freak
  • 1,923
  • 5
  • 43
  • 83
  • IE only allows clipPaths to be applied to SVG elements, not HTML elements. Non-Blink based Edge is the same. – Robert Longson Oct 31 '20 at 22:42
  • @RobertLongson But `clipPath` is within an `` element, so shouldn't this work? – Fiddle Freak Oct 31 '20 at 23:46
  • What kind of element has class div-intro-bottom? That's what you're trying to clip. – Robert Longson Oct 31 '20 at 23:48
  • @RobertLongson the div, but then inside the div is an svg right? I'm asking because I'm basically doing this same thing as the answer as this guy? https://stackoverflow.com/questions/39477755/how-to-make-clip-path-work-on-microsoft-edge – Fiddle Freak Oct 31 '20 at 23:49
  • And you're getting the [same answer too](https://stackoverflow.com/a/40943890/1038015). Apply the clip to something that's SVG if you want it to work in IE. – Robert Longson Oct 31 '20 at 23:50
  • okay I think I might be understanding the only difference is in the css. He is setting an id with path to use clip-path pointing to an id of clipPath. All contained within the svg. Hmmm I'm just not sure how to get this to work in my code though since I'm only using `polygon` and not `circle` with `path` – Fiddle Freak Nov 01 '20 at 00:03
  • this is where I tried to copy the answer from before > https://stackoverflow.com/questions/50838485/easiest-way-to-convert-polygon-clip-path-to-microsoft-edge-supported-clippath – Fiddle Freak Nov 01 '20 at 00:06
  • This is working fine on Blink (Chromium) based Edge. It doesn't matter where your SVG is placed, it is what the clip path is applied to that matters. Applying an SVG clip-path to an HTML element (the `
    `) only works in the Chromium-based versions of Edge. If you want a clipped rectangle on earlier versions of Edge, then you can't use a `
    `. You'll have to find another way.
     – Paul LeBeau Nov 01 '20 at 06:37

0 Answers0