Just display part of it when using on the next.js instace and there is a scaling on Windows

[flyingsnoopy]

It just display part of the component when I use it on a next.js instace and the "Change the size of text, apps, and other items" on "Scale and layout" of "Display" is larger than 100%.

I use this code to test.

import AvatarEditor from 'react-avatar-editor'

function Home() {
  

  return (
    <main>
      <AvatarEditor
        image="https://cdn.pixabay.com/photo/2023/10/13/14/39/book-8312948_1280.jpg"
        width={250}
        height={250}
        border={50}
        color={[255, 255, 255, 0.6]} // RGBA
        scale={1.2}
        rotate={0}
      />
    </main>
  )
}

export default Home

(App.js.The rest part of instace follow the template)

(Github Codespace,use Next.js template)

(Github Codespace,use ordinary React template)

[mosch]

Thank you for reporting this, however I'm not sure what the actual problem is. Can you rephrase?

[flyingsnoopy]

Sorry，I‘ve forgotten mention to that this bug seem that only shows on Windows.As the picture show, when I use it on a nextjs (v13.5.4) instance and the client setting "Change the size of text, apps, and other items" on "Scale and layout" of "Display" on Windows Setting is larger than 100%,it only show the top and left part and its right and bottom border are cut off.More information about Windows system scaling
(The red marks the "Change the size of text, apps, and other items" on "Scale and layout" of "Display")

[flyingsnoopy]

I'm sorry that I'm not good at English😥