tailwind css overflow hidden doesn't working in animation

UNRIVALLEDKING

I'm trying to animate an image by moving to different positions. but whenever it goes beyond the screen. the scrollbar appears. I tried adding overflow hidden in the parent element but it didn't worked. here is the required code snippet. I'm using tailwind css with nextjs

page.js

<main className="flex min-h-screen  items-center">
      <div className="container mx-auto flex">
        <div className="z-50 w-1/2">
          <h1 className="m-0 p-0 text-9xl">
            <span>{Title.slice(0, 2)}</span>
            <span className="text-secondary">{Title.slice(2)}</span>
          </h1>
        </div>
        <div className=" w-/2">
          <Image
            className="absolute z-10 animate-leftToRight"
            src={whiteCircle}
            alt="white circle"
          />
        </div>
      </div>
    </main>

tailwind.config.js

theme: {
    extend: {
      colors: {
        primary: "#1c2340",
        secondary: "#f27eb2",
      },
      fontFamily: {
        Josefin: ["Josefin Sans", "sans-serif"],
        Poppins: ["Poppins", "sans-serif"],
      },
      animation: {
        leftToRight: "leftToRight 10s ease-in-out infinite",
      },
      keyframes: {
        leftToRight: {
          "0%, 100%": { left: "40%", top: "-20%", rotate: "0deg" },
          "50%": { left: "93%", top: "50%", rotate: "180deg" },
        },
      },
    },
  },

layout.js

<html lang="en">
      <body className="font-Poppins overflow-hidden max-w-[100vw] bg-primary text-white">
        <Navbar />
        <div className="mt-[60px]">{children}</div>
        <Footer />
      </body>
    </html>

As you can see in this image that white circle is at top and there isn't vertical scroll

now as soon as the image goes beyond the screen scroll appears

stickyuser

You need to add overflow-hidden to the stacking context. At the moment that is the html element so you could add to globals.css:

html {
  @apply overflow-hidden;
}

Or you could create a new stacking context with relative and add the overflow hidden to that.

<main class="flex min-h-screen items-center relative overflow-hidden">

Exampe: https://play.tailwindcss.com/O8dHHydayG

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2023-06-19

Comments

0 comments

CSS (Tailwind) + React.ts overflow doesn't work

my css code "overflow:hidden" doesn't work

tailwind css overflow hidden doesn't working in animation

tailwind css overflow hidden doesn't working in animation

pump.io port in URL

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Double spacing in rmarkdown pdf

SQL Server : need add a dot before two last character

Ambiguous use of 'init' with CFStringTransform and Swift 3

Resetting Value of <input type="time"> in Firefox

Retrieve Element Tag Value XML Using Bash

How to pass data to the ng2-bs3-modal?

JWT gives JsonWebTokenError "invalid token"

How to update azerothcore-wotlk docker container

C++ 16 bit grayscale gradient image from 2D array

redirect your computer port to url

Capybara Selenium Chrome opens About Google Chrome

mysql.connector.errors.InterfaceError: 2003: Can't connect to MySQL server on '127.0.0.1:3306' (111 Connection refused)

How to make thrown errors visible outside of a Promise?

JMeter: Why get error when try to save test plan

Should you provide dependent libraries in client jar?

Issue making model pop up onPress of flatlist

Message: element not interactable on accessing a tag python

Calling Doctrine clear() with an argument is deprecated