react pdf duplicate glitch

Question

Hi so i have a problem with react-pdf. It is glitching and i dont know why.

My code is

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
  
  

export const HandOutTab = () => {
    
    const [numPages, setNumPages] = useState(null);
    const [pageNumber, setPageNumber] = useState(1);
  
    function onDocumentLoadSuccess({ numPages }) {
      setNumPages(numPages);
    }
    
  function changePage(offset) {
    setPageNumber(prevPageNumber => prevPageNumber + offset);
  }

  function previousPage() {
    changePage(-1);
  }

  function nextPage() {
    changePage(1);
  }
  
    return (
      <div>
        <Document 
          file="https://s3.eu-central-1.wasabisys.com/pdf-parttime-bijbelschool-jaar-1/PBS1%20-%20M6%20-%20Les2%20-%20Rentmeesterschap.pdf" 
          onLoadSuccess={onDocumentLoadSuccess}
        >
          <Page pageNumber={pageNumber} />
        </Document>
        <p>
          Page {pageNumber} of {numPages}
        </p>
        <button onClick={() => previousPage() } >Vorige</button>
        <button onClick={() => nextPage() } >Volgende</button>
      </div>
    )
}

and this is what i see

Now this is de source for react pdf

So i dont know what is going on.

The blue glitch looks like the color of the buttons i have beneeth the document but what is weird is that if i delete those buttons the glitch stays the same.

i use create-react-app btw

Answer 1

I already found the answer.

i had this in my global styles (i use styled components)

span {
    background: linear-gradient(75deg, #3B43F2, #3B8CF2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
     font-weight: 800;
}

so i deleted those styles and the blue gradient disapeared.