Safari rendering bug with CSS "clip"

Question

I have the following issue with Safari: http://cl.ly/ZlJ8

LiveDemo: http://drpdev.de/labs/example.html

full source code: http://jsfiddle.net/uqsghon7/

<div class="row">
  <div class="rowcontainer">
    <div class="side">
      ...
    </div>
  </div>
</div>
... (multiple times with different contents in .side)

and style:

.side {
  height: auto;
  padding-left: 50px;
  margin: auto;
  position: fixed;
  top: 50%; left: 0; bottom: 0;
  width: 350px;
  ...
}
.row {
  ...
  position: relative;
  overflow: hidden;
}
.rowcontainer {
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  clip: rect(0, auto, auto, 0);
  overflow:hidden;
}

It works perfectly in Chrome and Firefox. Before I tried to achieve it only with position fixed inside the (relative positioned) div (without second container) and overflow hidden and it worked in all browser but not Firefox, so I had to do this workaround with css-clip... It actually works in Safari as well but it seems like Safari's render engine is not refreshing the view when scrolling...

Any ideas?

looks like some issue with css effects, can you paste the complete css? — Omer Farooq, Feb 19 '15 at 15:02
We definitely need an [MCVE](https://stackoverflow.com/help/mcve). — Alexander O'Mara, Feb 19 '15 at 16:51
Sure, here is a full example http://jsfiddle.net/uqsghon7/ - which for some reason IS working in JSfiddle, but not when used outside (probably due to the iframe): http://drpdev.de/labs/example.html — Dion, Feb 20 '15 at 15:02

score 20 · Accepted Answer · edited May 23 '17 at 12:34

20

Very interesting.

I think I found the answer, but it involves a webkit-only hack. That bugs me a little but hopefully this still fits the bill.

Digging around for clipping/rendering issues, I stumbled across an SO question regarding background-position and fixed-position elements—the answer mentioned -webkit-mask-image as a webkit-only alternative to clip: auto.

It works for you, too—just adding the following CSS makes Safari happy:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  .rowcontainer {
    clip: auto;
    -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%)
  }
}

Here is a fiddle and a working model.

I confess I don't really understand why it works. But it works in Chrome and Firefox, too.

IE9, however, is really not happy with this. IE11 shows the content of the divs but skips most of their background. Worth considering...

edited May 23 '17 at 12:34

Community

1
1

answered Feb 21 '15 at 01:10

Jeremy Carlson

1,183
10
17

Thanks for your answer, your demo works just fine, I'll check it out right now :) – Dion Feb 22 '15 at 13:29
It works well except in IE9 and 10, if you also know a workaround for these it would be perfect, otherwise I'll have to do some optional JS for these IE versions. – Dion Feb 23 '15 at 22:11
I did some investigations. First thought I had was adding `` to the head, but that had no effect. I did see another SO answer with tantalizing clues @ http://stackoverflow.com/a/23859719/156645 - @lmeurs has a fiddle which seems to solve your problem, but only w/ relatively short `div` sizes. Once I made the containers taller, I ran into issues: http://jsfiddle.net/qbcaaddd/. I did notice that overflow:hidden is not actually needed. – Jeremy Carlson Feb 24 '15 at 17:05
Funnily enough trying to create the exact same interface. Unfortunately this fix causes issues for z-index, so the last slide is always on top: http://codepen.io/iamkeir/pen/qNGJRY I'm having a play to see if there is a workaround because it is *sooo* close! – iamkeir Aug 23 '16 at 15:40
My similar SO post: http://stackoverflow.com/questions/39054433/backface-visibility-bug-in-firefox-ie-scroll-wipe-ui-like-life-socks/ – iamkeir Aug 23 '16 at 15:41
2

I managed to fix it in Safari with `transform: perspective(0)` although still having issues in IE: http://codepen.io/iamkeir/pen/pbmxOP – iamkeir Aug 23 '16 at 16:40

Safari rendering bug with CSS "clip"

1 Answers1

Linked