CODEWITHSUNDEEP
csssafarioverflow
Miguel Leite
Miguel Leite

Reputation: 117

Safari OSX: overflow-y: scroll is forcing element to hide overflowing elements horizontally

my problem is the following:

I have a div, which has a set of buttons, each one with a popup associated to him.

<div id="floatingFilter">
  <div class="div-1">
    <button class="popupActivator">Trigger Popup</button>
    <div class="popupContainer"><span>This is my popup.</span></div>
  </div>
</div>

CSS:

#floatingFilter {
  height: 100%;
  width: 200px;
  overflow-y: scroll;
  position: fixed;
  top: 0px;
  right: 0px;
}
.popupContainer {
  position: fixed;
  right: 190px;
  top: 100px;
  width: 100px;
  height: 100px;
}

When I open a popup, on Safari OSX, I can only see the first 10px of the popupContainer. The rest of it is hiddden.

Anyone had that problem/have a solution? It works in the remaining browsers.

See plunker

Upvotes: 0

Views: 446

Answers (1)

Kevin Lynch
Kevin Lynch

Reputation: 24703

It is because you have position:fixed set. This will not allow it to scroll. If you removed this rule then it works fine.

DEMO http://jsfiddle.net/wtTLf/

Upvotes: 2

Related Questions