Ukraine
Ukraine copied to clipboard
Published
20 hours ago •
hejny
hejny
Avoid making part of the screen non-clickable
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/[email protected]/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
