Rendering issue on Chrome

[oliviertassinari]

I have increased the top positioning so we better see the issue on Chrome v60.0.3112.101:

[oliviertassinari]

On the other hand, YouTube implementation looks better. I will use this.

NProgress.configure({
  template: `
    <div class="bar" role="bar">
      <dt></dt>
      <dd></dd>
    </div>
  `,
});

const styles = {
  '#nprogress': {
    pointerEvents: 'none',
    '& .bar': {
      position: 'fixed',
      background: '#000',
      borderRadius: 1,
      zIndex: theme.zIndex.tooltip,
      top: 0,
      left: 0,
      width: '100%',
      height: 2,
    },
    '& dd, & dt': {
      position: 'absolute',
      top: 0,
      height: 2,
      boxShadow: '#000 1px 0 6px 1px',
      borderRadius: '100%',
      animation: 'nprogress-pulse 2s ease-out 0s infinite',
    },
    '& dd': {
      opacity: 0.6,
      width: 20,
      right: 0,
      clip: 'rect(-6px,22px,14px,10px)',
    },
    '& dt': {
      opacity: 0.6,
      width: 180,
      right: -80,
      clip: 'rect(-6px,90px,14px,-6px)',
    },
  },
  '@keyframes nprogress-pulse': {
    '30%': {
      opacity: 0.6,
    },
    '60%': {
      opacity: 0,
    },
    to: {
      opacity: 0.6,
    },
  },
};