Avoid making part of the screen non-clickable #20

euberdeveloper · 2022-03-30T02:28:24Z

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

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Avoid making part of the screen non-clickable #20

Avoid making part of the screen non-clickable #20

euberdeveloper commented Mar 30, 2022

Avoid making part of the screen non-clickable #20

Avoid making part of the screen non-clickable #20

Comments

euberdeveloper commented Mar 30, 2022