Because there is a <div> and only after the <a> with the rotation, it happens that the parent div covers a "transparent" part of the screen.
For instance, take this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bug</title>
</head>
<body>
<div style="background: black; width: 200px; height: 40px;" onclick="alert('miao')"></div>
<script src="https://cdn.jsdelivr.net/npm/save-ukraine@0.18.0/dist/umd/main.js"
integrity="sha384-Xn1RAG80M8PZlBQh3r8fUvHY7c8RtuplSnqXOkdJyCxqRsToRwJ1m2FP7vyJo7u/"
crossorigin="anonymous"></script>
<script>
Ukraine.save({
ribbon: 'TOP_LEFT',
hasShadow: true,
countries: [],
});
</script>
</body>
</html>You will see that if you click the black rectangle, it will not display any alert, because the ribbon's parent is obscuring it. In the image below, the covering div is with a purple boder:
A solution would be just to remove the superfluous div container and moving the first transform directly to the tag
Because there is a
<div>and only after the<a>with the rotation, it happens that the parent div covers a "transparent" part of the screen.For instance, take this code:
You will see that if you click the black rectangle, it will not display any alert, because the ribbon's parent is obscuring it. In the image below, the covering div is with a purple boder:
A solution would be just to remove the superfluous div container and moving the first transform directly to the tag