CSS clip-path not working in Chrome 63

Question

I made a 'radar' effect inside a hexagonal div. It's an image rotating and there is a clip-path to make it looks like its inside the hexagonon.

Here is a Fiddle of the same code on my project: https://jsfiddle.net/f6633a79/17/

    body{
      background : gray;
    }
    $azul : #3399dd;
    $sombra : 0px 0px 35px 2px $azul;

    .center{
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 100px;
        z-index: -99;        
    }
    .retentor{
        height: 100%;
        width: 87px;
        left: -50%;
        z-index: 1;
        position: relative;
        //clip-path: url(#svgPath);
        clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
      }
      .hexagon .pointer {
        position: absolute;
        z-index: 1024;
        left: -10px;
        right: -10px;
        top: -10px;
        bottom: 50%;
        will-change: transform;
        transform-origin: 50% 100%;
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        background-image: linear-gradient(135deg, 
          rgba(255, 255, 255, 0.8) 0%, 
          rgba(255, 255, 255, 0.02) 70%,
          rgba(255, 255, 255, 0) 100%
          );
          -webkit-clip-path: polygon(100% 0, 
          100% 10%, 
          50% 100%, 0 100%, 0 0);
        clip-path: polygon(100% 0, 
          100% 10%, 
          50% 100%, 0 100%, 0 0);
        
        animation: rotate360 3s infinite linear;
      }
      
      @keyframes rotate360 {
        0% {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(-360deg);
        }
      }
      #hex1 {
        width: 75px;
        height: 75px;
      }
    
      #radar {
        background-color: #39D;   
      }
      .centralizador{
        position: absolute;
        left: 50%;	
      }
      .hexagon-wrapper {
        text-align: center;
        position: relative;
        display: inline-block;
      }
      .hexagon {
        height: 100%;
        width: 57.735%;
        display: inline-block;
        
      }
      .hexagon:before {
        position: absolute;
        top: 0;
        right: 21.1325%;
        background-color: inherit;
        height: inherit;
        width: inherit;
        content: '';
        transform: rotate(60deg);
      }
    
      .hexagon:after {
        position: absolute;
        top: 0;
        right: 21.1325%;
        background-color: inherit;
        height: inherit;
        width: inherit;
        content: '';
        transform: rotate(-60deg);
      }
      .hexagonshadow {
        height: 100%;
        width: 57.735%;
        display: inline-block;
        position: absolute;
        left: 20%;
        z-index: -6;
        box-shadow: $sombra;
        animation: shadow 3s infinite ease;
      }
        
      @keyframes shadow {
        0% {
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }
        
      .hexagonshadow:before {
        position: absolute;
        top: 0;
        right: 21.1325%;
        background-color: inherit;
        height: inherit;
        width: inherit;
        content: '';
        transform: rotate(60deg);
        box-shadow: $sombra;
      }
    
      .hexagonshadow:after {
        position: absolute;
        top: 0;
        right: 21.1325%;
        background-color: inherit;
        height: inherit;
        width: inherit;
        content: '';
        transform: rotate(-60deg);
        box-shadow: $sombra;
      }

<div class="center">
    <div id="hex1" class="hexagon-wrapper">
    <div id="radar" class="hexagon">                
      <div class="retentor">
        <div class="pointer"></div>
      </div>
    </div>
    <div class="hexagonshadow"></div>        
    </div>
</div>  

<svg width="0" height="0">
    <defs>
        <clipPath id="svgPath" clipPathUnits="objectBoundingBox">
            <polygon points="0 0.5, 0.25 0, 0.75 0, 1 0.5, 0.75 1, 0.25 1" />
        </clipPath>
    </defs>
</svg>

The problem is that the clip-path (and -webkit-clip-path) is not working on the ionic page, even on the Google Chrome and Firefox for Android, but works perfectly on PC, through Ionic serve too.

Here is the result on the device:

I found this topic that seems related, but the suggestion to use SVG on the clip path stills lead to no result. (You can find both methods of clip-pathing on the css file)

Ideas?

--EDIT--

Seems that Chrome has partial support to clip-path, to shapes and inline svgs. But even with the shape property, it isn't working properly. (But Firefox is showing correctly with polygon) I'm looking what is the inline svg means.

--EDIT 2--

Clip-Path is working on Chrome 62. Seems that it is a bug.

Answer 1

Problem solved in Chrome version 64.