CODEWITHSUNDEEP
htmlcssanimationoverflow
boozi
boozi

Reputation: 506

Overflow with animation won't work

I'm trying to prevent overflow on my website, even though i have divs that flows outside with animation. You can see it at this link.

I did overflow-x:hidden overflow-y:hidden

on the body, html, headers, footer and the cloud divs. It works just fine on desktop browsers, but on mobile you can scroll both vertical and horizontal.

Why is that? there is nothing odd in my code. the animations start at -200px and end on 2000px (left).

This is my HTML:

> <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <meta name = "viewport" content = "width=device-width, height=device-height, minimum-scale=1, maximum-scale=1">
            <meta name = "apple-mobile-web-app-capable" content = "yes" /> 
            <link type="text/css" rel="stylesheet" href="css/normalize.css">
            <link type="text/css" rel="stylesheet" href="css/style.css">
        <title>Tweezers</title>
    </head>

    <body>

        <h2 class="tk-expo-sans-pro">we're working on our awesome website</h2>
        <img id="logo" src="img/logo.gif"/>
        <div class="land"></div>
        <div class="cloud1"></div>
        <div class="cloud2"></div>
        <div class="cloud3"></div>
        <footer>
            <h3 class="tk-expo-sans-pro">meanwhile you can reach us via:</h3>
            <a href="http://facebook.com/tweezers.co"><div class="icon-uniE600"></div></a>
            <div class="icon-uniE601"></div>
            <div class="icon-uniE602"></div>
            <div class="icon-uniE603"></div>
        </footer>
        <!---JS FILES-->
        <script type="text/javascript" src="//use.typekit.net/cxg8ost.js"></script>
        <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    </body>

</html>

What I'm missing? Thanks, Boaz.

Upvotes: 0

Views: 71

Answers (2)

Zee
Zee

Reputation: 161

In which mobile device are you checking your page and in which browser?

There is a similar issue in firefox 18 Android device. Please refer this : http://jbkflex.wordpress.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/

Upvotes: 1

Vijayakumar Selvaraj
Vijayakumar Selvaraj

Reputation: 523

Try adding the following meta tag in your HTML page,

<meta name="viewport" content="width=device-width,height=device-height">

Upvotes: 0

Related Questions