溢出-x:隐藏；在移动设备上不工作 [英] Overflow-x:hidden; on mobile device not working

问题描述

我希望你们能帮助我，因为我似乎无法解决这个问题.我建立了一个单页网站，它运行良好，除了一件事，即溢出-x:隐藏在平板电脑视口上(可能还有智能手机，还没有测试过)

I hope you guys can help me cause I cant seem to wrap my head arroud this. I build a one-page site which works fine, except for one thing, which is the overflow-x:hidden on the tablet viewport (and probably smartphone too, havent tested that yet)

尽管主体具有 body {overflow-x:hidden;} 在 PC 上的普通浏览器中工作正常，但我能够移动到一边大约 25 像素左右，原因是我旋转的 div 溢出，它伸出屏幕，我想隐藏它.

Despite the body having body {overflow-x:hidden;} which works fine within normal browsers on the pc, i am able to move to the side for about 25 pixels or so, cause thats the overflow of my rotated div, that sticks out of the screen, which i wanted to hide.

有没有办法解决这个问题?我提供了以下部分头部和 html/css

Is there a way to fix this? I supplied below part of the head and html / css

视口元标记.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

应用于媒体查询的 CSS 以及它们各自溢出的元素

The CSS applied to the media queries and they respective elements that overflow

@media only screen and (max-width: 992px){
    #skills, #experience    {overflow-x:hidden;}
}
@media (max-width: 479px){
    body                    {overflow-x:hidden;}
}

以及应用于 html/body 标签的常规 CSS

And the regular CSS applied to the html / body tags

body, html  {height: 100%;width: 100%;font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;color: #757575; overflow-x:hidden;}

id 的 #skills 和 #experience 有一个名为 .hoek 的类，其定义如下并导致溢出.

The id's #skills and #experience have a class called .hoek which is defined as followed and causes the overflow.

    .hoek    {margin: 0 -50px; 
              -webkit-transform-origin:left center; 
              -moz-transform-origin:left center; 
              -o-transform-origin:left center; 
              -ms-transform-origin:left center;
              margin-top: -175px;                       
              -webkit-transform:rotate(5deg); 
              -moz-transform:rotate(5deg); 
              -o-transform:rotate(5deg); 
              -ms-transform:rotate(5deg);
              z-index: 20;
    }

我认为，我必须指出，#skills 和 #experience 是 sections 而不是 div.我不确定这是否可能是代码中的问题，但我认为不是.如果需要更多信息，请告诉我，但我想我已经涵盖了这里的基础.

I must point out, I think, that the #skills and #experience are sections and not divs. I am not sure if that might be a problem within the code, but I thought not. If there is anymore information that is needed, please let me know, but I thought I had covered the bases here.

我不知道从哪里开始小提琴，所以我只提供网站的测试链接:http://www.jellyfishwebdesign.nl/Joost/index.php

I dont know where to begin with a fiddle, so I supply you just the test link of the site: http://www.jellyfishwebdesign.nl/Joost/index.php

推荐答案

实际上在 Stack Overflow 上找到了答案:

Found the answer actually here on Stack overflow:

如果 body 和 html 标签中的 overflow-x:hidden="viewport"> 标签存在，因此我在 body 标签中创建了一个包装器，用 overflow-x: hidden 覆盖我的其余内容，解决了问题.

The browsers on mobile devices ignore the overflow-x:hidden within the body and html tag if <meta name="viewport"> tag is present, thus i created a wrapper in the body tag covering the rest of my content with a overflow-x: hidden in it, solving the problem.

文档:

Overflow-x:hidden 不会阻止内容在移动浏览器中溢出.

不好的是它阻止了现在使用滚动的 jquery 插件......

The bad thing is that it prevents the use now of a jquery plugin, that scrolls....

这篇关于溢出-x:隐藏；在移动设备上不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！