发表新帖
发表新帖

Firefox & CSS3: using overflow: hidden and box-shadow

前端 未结
关注
7 2174
深忆病人
深忆病人 2021-02-07 19:40

I\'m not sure whether this bug applies to Firefox only or also to WebKit-based browsers, but it\'s really, really annoying.

I\'ve got a template/framework for my CMS in

相关标签:
7条回答
  • 不要未来只要你来
    2021-02-07 20:06

    I just had this issue with a design I was working on. Basically, Firefox creates a scrollable area for any shadow that extends past the right edge of the page. For whatever reason, Firefox doesn't create scrollable area if the shadow extends to the left. So my simple solution is to move the shadow completely to the left.

    Problematic Code:

    -moz-box-shadow: 5px 5px 5px #000;

    Simple solution:

    -moz-box-shadow: -5px 5px 5px #000;

    I tried setting the x-offset to 0px, but since the blur is 5, there was still a scrollable area about 2-3px wide.

    0 讨论(0)
  • 执念已碎
    2021-02-07 20:07

    While it might be frustrating to hear, that's not a bug, it really is a feature. If there's a scrollbar/scrollable area, and the area is activated and an arrow or other input device is firing, the area will scroll.

    To counteract this you could try to fight each possible user input (touchpad scrolling, arrow keys, highlight-and-drag) with javascript, but the best answer for you is to rethink how you're using CSS here. Try using width:auto instead of width:100%, for instance.

    To demonstrate (update):

    CSS:

    #parent { width:50px; height:20px;overflow:hidden; }
#overflow { width:50px;height:50px;overflow:auto; }

    HTML:

    <div id="parent">
    <div id="overflow">blahaahhahahahahahahahahahahaaaaaaaaaaahahahahahaaaaaaaaaaaaaaahhhhhhhhhhhhhhhhhhahhaahahaha</div>
</div>

    Jack the height on #parent up to 50px and you see the scrollbar still--soo it's just covered up; the content isn't hidden irretrievably. Set overflow:hidden on #overflow, and no scroll bars.

    0 讨论(0)
  • 离开以前
    2021-02-07 20:11

    Skip to second paragraph for actual solution.

    Depending on your needs my issue and solution I found for myself might satisfy your needs. I found that my issue was quite similar, no scrollbar when body { overflow: hidden; }, reason being, I believe, that the html and body elements' sizes are actually dictated by the size of the browser window's viewable area.

    solution: If you only issue is the overflow off the x-axis, you can do body{ overflow-x: hidden; }, then using javascript or media queries you can easily change the properties applied to the body element and change it back to whatever you please.

    example:

    body { overflow-x: hidden; }

@media screen and (min-width: 1200px) {
    body { overflow-x: visible; }
}

    hope this helps.

    0 讨论(0)
  • 借酒劲吻你
    2021-02-07 20:19

    You can use the spread radius (the 4th length) to make the shadow's size smaller than the element's size and then a large y offset to let it show beneath the element. Something like box-shadow: 0 10px 10px -5px black; (of course I don't know what values you need since you didn't provide a fiddle, you need to play around with them in the dev tools). Keep in mind that the spread radius causes the shadow to expand/contract from all sides. So, for example, a spread radius of -1px will actually make the shadow 2px narrower.

    0 讨论(0)
  • 半阙折子戏
    2021-02-07 20:20

    Since I'm dealing with the same annoying issue, I'll go ahead and chime in here to say that this is definitely a shitty feature (if indeed it should be referred to as a feature). To have a box shadow cause a scroll bar is useless, though I'd be happy to eat my words if someone could give me a really good reason that it should be like that.

    I think the answer here is just rendering the page a little different and letting firefox users miss out on the box shadow. Easy enough if you just don't declare -moz-box-shadow.

    0 讨论(0)
  • 再見小時候
    2021-02-07 20:21

    First, be careful when pointing to somebody else's thing as the cause of your problems. Think to yourself which is more likely, that the issue is with the piece of code used by 200k users and 20k developers on a daily basis, or that it's in the thing used by you, for 4 hours now.

    That said, your next step should be to reduce this down to a simple test page that contains just enough HTML to demonstrate the behavior. In your case, that would be a page like this:

    <html>
  <body style="overflow:hidden;">
    <div style="box-shadow:whatever;">
      This should cause scrollbars to show
    </div>
  </body>
</html>

    One of two things will happen:

    Either the problem won't appear, in which case you get to slowly add back the other things on your real-life page until you find out what was actually causing the issue.

    Or the problem will still be there, in which case you can report back to us here. You will also then be able to file a bug report with the Mozilla folks.

    Good luck!

    0 讨论(0)
 看不清?
提交回复
热议问题