question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Aspect ratio in Chrome throws console errors

See original GitHub issue

I’m using the latest (1.0.0-rc3) version of react-image-crop with the following crop attributes:

const cropAttributes = {
  width: 100,
  height: 12,
  x: 0,
  y: 0,
  aspect: 1663/200
}

and I’m receiving the following error in the Chrome console: Error: <polygon> attribute points: Expected number, "0 0, 1 0, 1 NaN, 0 NaN".

Interestingly enough, this error has no effect on the crop. Everything works as expected, the aspect ratio is locked, the height, width, and coordinates are also correct, even with different values.

It seems that the inclusion of aspect in the attributes is the only thing that causes this error. Also, if the aspect is the only attribute specified, no error occurs:

const cropAttributes = {
  aspect: 1663/200
}

I suspect this might be an issue with webkit but I’m not 100% certain.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:21 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
DominicTobiascommented, Feb 25, 2017

Hey sorry, I probably shouldn’t answer stuff when I’m drunk I’m a bar 😃 I thought this was regarding a different issue. Are you getting the same error as the OP? What does it say and what are you passing in as props?

On Sat, 25 Feb 2017 at 11:21, Isaac Hinman notifications@github.com wrote:

In that case I’m not really sure what you’re asking, but no - there is no immediately obvious DOM node with a crossorigin attribute.

— You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub https://github.com/DominicTobias/react-image-crop/issues/37#issuecomment-282477771, or mute the thread https://github.com/notifications/unsubscribe-auth/AAuZ-n2-RDI0ktGHWz4NA3Tc0dRG34A0ks5rgA7WgaJpZM4ItHNV .

1reaction
isaachinmancommented, Feb 24, 2017

I still get this error, with the following setup:

<ReactCrop crop={{ aspect: 1, width: 100, top: 0, x: 20 }} src={newProfilePhoto.preview} />

This is in v2.0.2.

Read more comments on GitHub >

github_iconTop Results From Across the Web

google chrome js console show thin red line, no printed error ...
I was having the same problem with the red line. Ran the site in Firefox and was able to see the error. In...
Read more >
1295750 - console-entered error handling code is ... - Monorail
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.81 Safari/537.36
Read more >
Chrome 88 adds aspect-ratio and 2 awesome new ... - YouTube
Chrome 88 has shipped, and with it we now have aspect - ratio ! Obviously we have to be careful because support for...
Read more >
What's New In DevTools (Chrome 91)
Developer advocate working on Chrome DevTools at Google. ... Image aspect ratio information in the Network panel ... Page errors (red).
Read more >
Fix "Aw, Snap!" page crashes and other page loading errors
If you're getting the "Aw, Snap" error or another error code instead of a webpage, Chrome is having problems loading. You might also...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found