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.

Resizing from <img> element results in broken output in Chrome 81

See original GitHub issue

Hi. First of all - many thanks for that library! We’ve been using it quite a lot but recently faced several images that result in broken output when using Chrome and <img> element as source. If used in Firefox - everything’s fine. If used in Chrome with <canvas> element as source (without any transformation, just drawing image) - everything’s fine. Options and features don’t affect this.

Original image (one of) - https://dl.dropboxusercontent.com/1/view/zjnu3kgtyzq6zv3/pica/original.jpg Corrupted result (<img> source) - https://dl.dropboxusercontent.com/1/view/c6s817ypu7uibgi/pica/from image.png Correct result (<canvas> source) - https://dl.dropboxusercontent.com/1/view/kh4cisii050o4gn/pica/from canvas.png Playground for testing - https://codepen.io/msidorov/full/PoPdVjV

All these were taken from Chrome 81, different OSes

Many thanks in advance.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:28 (25 by maintainers)

github_iconTop GitHub Comments

1reaction
FarSeeingcommented, Jun 9, 2020

@puzrin - yep, missed that. Regarding API itself - I’m not the best match to describe because I already solved issues manually but from what I see that could be really useful for someone else who faces same problem I had.

0reactions
puzrincommented, Jul 8, 2020
Read more comments on GitHub >

github_iconTop Results From Across the Web

ResizeObserver - loop limit exceeded - Stack Overflow
In our case an observed resize of an element triggered a change on the page, which caused a resize of the first element...
Read more >
Scale and align images - Google Web Designer Help
The Scaling property for images lets you set how the image should scale when your original image file has different dimensions than your...
Read more >
Apply width and height attributes to allow responsive image ...
So the browsers were not able to calculate the aspect ratio of images and show image area while image was still loading -...
Read more >
Resizing browser flickers black on all window managers
What is the expected output? What do you see instead? Expect the window contents to resize smoothly. In the gtk version of chrome...
Read more >
Image resize in browsers is broken | Uploadcare Blog
Straight-forward downscaling. Downscaling is simple and only takes three ingredients: an image, a browser and it's built-in element called ...
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