Question 290212 in Html Question posted in
Some basic documentation can be found here.

html：The following code in the Safari browser, after flipping the card, the left button cannot respond when clicked

<style>
    html,
    body {
        margin: 0;
        padding: 0;
    }
    .container {
        margin: auto;
        width: 200px;
        height: 200px;
        position: relative;
        perspective: 1000px;
    }
    .card {
        position: absolute;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: transform 1s;
    }
    .card.flip {
        transform: rotateY(180deg);
    }
    .card .front,
    .card .back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
    }
    .card .front {
        background-color: #f00;
    }
    .card .back {
        background-color: #0f0;
        transform: rotateY(180deg);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        box-sizing: border-box;
    }
    button {
        cursor: pointer;
    }
    .button {
        position: fixed;
        top: 250px;
        left: 50%;
        transform: translateX(-50%);
    }
</style>

<body>
    <button class="button"   onclick="document.querySelector('.card').classList.toggle('flip')">Flip card</button>
    <div class="container">
        <div class="card">
            <div class="front">Front</div>
            <div class="back">
                <button onclick="console.log('Left button clicked!')">Left</button>
                <button onclick="console.log('Right button clicked!')">Right</button>
            </div>
        </div>
    </div>
</body>

The code can respond to the events of the buttons on both sides after flipping the card in browsers other than Safari. However, in Safari, the left button does not respond, while the right button works normally. How can I make the left button respond to events in Safari?

Tags:

2

Answers


  1. 0

    I checked in the safari browser. Not any issue in your code. It is perfectly working.

    Login or Signup to reply.
  2. 0

    I agree with Rushita. I copied the code in an HTML file and opened it using Safari browser and it worked. Maybe you should check the version of the browser. I am using Safari version 17.1.

    I am also attaching the code running with console outputAnd here is the code running with console outputSafari Version 17.1

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search