动画溢出不起作用答案

【问题标题】：Overflow with animation won't work动画溢出不起作用
【发布时间】：2014-09-02 08:50:41
【问题描述】：

我试图防止我的网站溢出，即使我的 div 会随着动画流到外面。你可以在this link看到它。

我做了overflow-x:hidden overflow-y:hidden

在正文、html、页眉、页脚和云 div 上。 它在桌面浏览器上运行良好，但在移动设备上你可以垂直和水平滚动。

这是为什么呢？我的代码没有什么奇怪的。动画从 -200px 开始，到 2000px 结束（左）。

这是我的 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>

我错过了什么？谢谢，波阿斯。

【问题讨论】：

标签： html css animation overflow

【解决方案1】：

您在哪个移动设备上查看您的页面以及在哪个浏览器中？

firefox 18 Android 设备中存在类似问题。请参考：http://jbkflex.wordpress.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/

【讨论】：

我在 Safari (iPhone 4&5) 和 Chrome (Nexus) 上试过。会检查的！谢谢。

【解决方案2】：

尝试在您的 HTML 页面中添加以下元标记，

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

【讨论】：

我有它（编辑了问题，添加了 html 代码）.. 它仍然在移动设备上出现这种奇怪的溢出。奇怪:(
当然，我的所有容器都有溢出：隐藏。我什至做了overflow-x 和overflow-y hidden。