Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Safari position:fixed Bug Report</title>
  </head>
  <body>
    <div id="pushed-col" class="two-thirds push-one-third">
      <p>First paragraph.</p>
      <p class="pos-fixed">
        This is a paragraph with <code>position:fixed</code>. In Safari, the paragraph's left edge is at the left edge of the viewport, so the first part of this text is covered by the green div. In all other browsers, this paragraph is entirely within the cyan div and all of its text is visible.
      </p>
      <div class="spacer"></div>
    </div>
    <div id="pulled-col" class="one-third pull-two-thirds">
      <p>Second paragraph</p>
      <div class="spacer"></div>
    </div>
  </body>
</html>
 
#pulled-col {
  background-color: lime;
}
#pushed-col {
  background-color: cyan;
}
body {
  margin: 0;
}
p {
  margin-left: 0;
  margin-right: 0;
}
.spacer {
  display: block;
  height: 2000px;
}
.pos-fixed {
  background-color: red;
  position: fixed;
}
.push-one-third {
    left: 33.33333333%;
}
.pull-two-thirds {
    right: 66.66666667%;
}
.one-third {
    width: 33.33333333%;
    float: left;
    position: relative;
}
.two-thirds {
    width: 66.66666667%;
    float: left;
    position: relative;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
cvrebertpro
0viewers