0

I have a scrollable div and was trying to implement shadow on top of the div when scrolling the div.

I found this simple implementation on codepen : https://codepen.io/bennyzhao/pen/iGoBm

This example did work for me, but after I was playing around, I discovered something strange with the behavior of background-attachment: local when direction is set to rtl.

I've created a very simple example on codepen to show the strange behavior : https://codepen.io/Ron537/pen/ZLaqoG

I've noticed that the problem exists in Google Chrome but works fine with Microsoft Edge.

Here is an image comparasion : Chrome vs Edge

As you can see, with Google Chrome the background not occupies the entire div width, but leaves some blank space.

Is this a known bug? Is there a solution for this?

Ron537
  • 990
  • 1
  • 9
  • 20
  • don't you like to use a `box-shadow` attribute? https://codepen.io/anon/pen/XpzobB – Banzay Jan 28 '17 at 23:31
  • With box-shadow I can't achieve my goal to show the shadow only when scrolled... My example was just to show the steps to reproduce the"bug"... Maybe you got another way to implement this using pure css and showing the shadow only when div is scrolled? – Ron537 Jan 29 '17 at 04:37
  • I would try to use `:before` pseudo-element – Banzay Jan 29 '17 at 06:52
  • But there is no selector for scrollbar not on top, so I can't combine the shadow with the scroll position.. – Ron537 Jan 29 '17 at 06:56
  • Seems that the blank space is the space reserved for the scrollbar in the opposite direction. – vals Jan 29 '17 at 18:58

0 Answers0