From 0e0b0aa218c7bac3a5eea3c04e4b858bd102fe8a Mon Sep 17 00:00:00 2001 From: Max Goodman Date: Sun, 21 Jul 2013 19:39:44 -0700 Subject: [PATCH] Use background attachment to position sidebar grippy image. Fixed positioning was causing the grippy image to bleed out of the sidebar when scrolling horizontally on small viewports. --- r2/r2/public/static/css/reddit.less | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/r2/r2/public/static/css/reddit.less b/r2/r2/public/static/css/reddit.less index b37b0fc1c..b76809cde 100755 --- a/r2/r2/public/static/css/reddit.less +++ b/r2/r2/public/static/css/reddit.less @@ -7129,13 +7129,11 @@ body.with-listing-chooser { &:before { content: ''; display: block; - position: fixed; - top: 50%; + position: absolute; width: @lc-grippy-width; - height: @grippy-image-height; - margin-top: -@grippy-image-height / 2; - background-image: url(../sidebar-grippy-hide.png); /* SPRITE */ - background-repeat: no-repeat; + height: 100%; + background: url(../sidebar-grippy-hide.png) fixed no-repeat; + background-position: (@lc-width + (@lc-grippy-width - @grippy-image-width) / 2) center; margin-left: (@lc-grippy-width - @grippy-image-width) / 2; opacity: .5; } @@ -7194,8 +7192,8 @@ body.with-listing-chooser { width: @lc-grippy-width + @grippy-fudge; &:before { - background-image: url(../sidebar-grippy-show.png); /* SPRITE */ - background-repeat: no-repeat; + background-image: url(../sidebar-grippy-show.png); + background-position: ((@lc-grippy-width - @grippy-image-width) / 2 + 1) center; margin-left: (@lc-grippy-width - @grippy-image-width) / 2; width: @lc-grippy-width; }