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.
border-radius on img tag doesn't render as expected
See original GitHub issueMy code is following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<img src="my_local_img.jpg" style="border-radius: 50%;">
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta1/html2canvas.js"></script>
<script>
html2canvas(document.body, {
"logging": true,
"onrendered": function(canvas) {
var img = new Image();
img.onload = function() {
img.onload = null;
window.open(img.src)
};
img.onerror = function() {
img.onerror = null;
if(window.console.log) {
window.console.log("Not loaded image from canvas.toDataURL");
} else {
alert("Not loaded image from canvas.toDataURL");
}
};
img.src = canvas.toDataURL("image/png");
}
});
</script>
</html>
original:
the result:
Is it a bug? how should i fix it?
Issue Analytics
- State:
- Created 8 years ago
- Reactions:1
- Comments:7
Top Results From Across the Web
Table's border-radius does not function as expected
It works, this is a problem with the tool used: normalized CSS by jsFiddle is causing the problem by hiding you the default...
Read more >Images Don't Support Border Radius When Set to <figure ...
The figure tag supports border-radius. However, since only the figure tag and not the image receives the radius, the image overflows the tag, ......
Read more >How to master nextjs images - Jakob Lind
Your styles are not applied as expected, and it behaves weirdly when resizing the viewport. So you go back to using the basic...
Read more >CSS Backgrounds and Borders Module Level 3 - W3C
Abstract. This draft contains the features of CSS relating to borders and backgrounds. The main extensions compared to level 2 are borders ...
Read more >CSS3 border-radius bug with border, padding and any child ...
Browser does not render CSS3 border-radius child element in right way. It falls on using border and padding for parent element. What do...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
In my case, it fixed with border-radius 70%.
Increase the border-radius value to a point where you get desired results. I once had to put 120% for a circle.