{"id":367270,"date":"2022-07-29T07:55:31","date_gmt":"2022-07-29T14:55:31","guid":{"rendered":"https:\/\/css-tricks.com\/?p=367270"},"modified":"2022-07-29T07:55:32","modified_gmt":"2022-07-29T14:55:32","slug":"scroll-shadows-pure-css-parallax-game-back-on","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/scroll-shadows-pure-css-parallax-game-back-on\/","title":{"rendered":"Scroll Shadows? Pure CSS Parallax? Game Back On."},"content":{"rendered":"\n<p>Chris <a href=\"https:\/\/css-tricks.com\/books\/greatest-css-tricks\/scroll-shadows\/\">calls<\/a> <em>scroll shadows<\/em> one his favorite CSS-Tricks of all time. Lea Verou <a href=\"http:\/\/lea.verou.me\/2012\/04\/background-attachment-local\/\" rel=\"noopener\">popularized<\/a> the pure CSS approach using four layered background gradients with some clever <code>background-attachment<\/code> magic. The result is a slick scrolling interaction that gives users a hint that additional content is available in a scrollable container.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzXBYvL\" src=\"\/\/codepen.io\/anon\/embed\/YzXBYvL?height=450&amp;theme-id=1&amp;slug-hash=YzXBYvL&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzXBYvL\" title=\"CodePen Embed YzXBYvL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Just one problem: it <a href=\"https:\/\/css-tricks.com\/ios-13-broke-the-classic-pure-css-parallax-technique\/\">broke<\/a> in Safari iOS 13. One day it was all good. The next, not so much. And that wasn\u2019t the only thing affected. <a href=\"https:\/\/keithclark.co.uk\/articles\/pure-css-parallax-websites\/\" rel=\"noopener\">Keith Clark\u2019s CSS-only parallax effect<\/a> also stopped working right about then.<\/p>\n\n\n\n<p>Well, reader <a href=\"https:\/\/css-tricks.com\/scroll-shadows-with-javascript\/#comment-1796537\">Ronald wrote in<\/a> to say that all is working once again! In fact, I\u2019m writing this on my iPad (Safari 15.5) right now and Chris\u2019s demo is looking sharp as ever. So is Keith\u2019s <a href=\"https:\/\/keithclark.co.uk\/articles\/pure-css-parallax-websites\/demo3\/\" rel=\"noopener\">original demo<\/a>.<\/p>\n\n\n\n<p>So, what broke it? We still don\u2019t know. But the <a href=\"https:\/\/developer.apple.com\/documentation\/safari-release-notes\/safari-13-release-notes\" rel=\"noopener\">Safari 13 release notes<\/a> offer clues:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><ul><li>Added support for one-finger accelerated scrolling to all frames and&nbsp;<code>overflow:<wbr>scroll<\/code>&nbsp;elements eliminating the need to&nbsp;<code>set-webkit-overflow-scrolling: touch<\/code>.<\/li><li>Changed the default behavior on iPad for wide web pages with responsive meta-tags that require horizontal scrolling. Pages are scaled to prevent horizontal scrolling and any text is resized to preserve legibility.<\/li><\/ul><\/p><\/blockquote>\n\n\n\n<p>When was it fixed and what fixed it? Well, on the scroll shadow side, the Safari 15.4 <a href=\"https:\/\/developer.apple.com\/documentation\/safari-release-notes\/safari-15_4-release-notes\" rel=\"noopener\">included<\/a> some work on <code>background-attachment: local<\/code> that may have done the trick. On the parallax side, Safari 14.1 <a href=\"https:\/\/developer.apple.com\/documentation\/safari-release-notes\/safari-14_1-release-notes\" rel=\"noopener\">added<\/a> support for individual transform properties\u2026 so maybe that?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Chris calls scroll shadows one his favorite CSS-Tricks of all time. Lea Verou popularized the pure CSS approach using four layered background gradients with some clever background-attachment magic. The result is a slick scrolling interaction that gives users a hint that additional content is available in a scrollable container. Just one problem: it broke in [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":332489,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"They broke in iOS 13 but seem to be back in action!","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[827,1465,1372,754],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/smooth-scroll.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":244748,"url":"https:\/\/css-tricks.com\/use-cases-fixed-backgrounds-css\/","url_meta":{"origin":367270,"position":0},"title":"Use Cases for Fixed Backgrounds in CSS","date":"August 25, 2016","format":false,"excerpt":"File this into a category of personal \"CSS Ah-Ha Moments\". The background-attachment property has never seemed all that useful to me. I have always looked at it as some sort of old school design trick from the GeoCities days to get a repeating background to stay in place during scroll.\u2026","rel":"","context":"In &quot;Beginner&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":366896,"url":"https:\/\/css-tricks.com\/in-praise-of-shadows\/","url_meta":{"origin":367270,"position":1},"title":"In Praise of Shadows","date":"July 12, 2022","format":false,"excerpt":"Our dear friend Robin has a new essay called In Praise of Shadows. Now, before you hop over there looking for nuggets on CSS box shadows, text shadows, and shadow filters... this is not that. It's an essay on photography and what Robin has learned about handing shadows with a\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/robin-rendle-shadows-praise.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":352754,"url":"https:\/\/css-tricks.com\/scroll-shadows-with-javascript\/","url_meta":{"origin":367270,"position":2},"title":"Scroll Shadows With JavaScript","date":"October 5, 2021","format":false,"excerpt":"Scroll shadows are when you can see a little inset shadow on elements if (and only if) you can scroll in that direction. It's just good UX. You can actually pull it off in CSS, which I think is amazing and one of the great CSS tricks. Except... it just\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/Screen_Shot_2021-09-05_at_9.52.01_AM.webp?fit=1200%2C920&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":350201,"url":"https:\/\/css-tricks.com\/the-fixed-background-attachment-hack\/","url_meta":{"origin":367270,"position":3},"title":"The Fixed Background Attachment Hack","date":"August 27, 2021","format":false,"excerpt":"What options do you have if you want the body background in a fixed position where it stays put on scroll? background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even supported by the most widely used mobile browsers. You can\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/background-boxes.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":178538,"url":"https:\/\/css-tricks.com\/pure-css-parallax-scrolling-websites\/","url_meta":{"origin":367270,"position":4},"title":"Pure CSS parallax scrolling websites","date":"August 11, 2014","format":false,"excerpt":"Keith Clark explains the core concept behind parallax scrolling (e.g. different elements scroll at different rates) with just CSS. It's a devilishly clever (yet simple) combination of 3D transforms to push the element \"away\" from the screen, affecting it's scroll rate, while adjusting the scale so the element appears at\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":300349,"url":"https:\/\/css-tricks.com\/moving-rainbow-underlines\/","url_meta":{"origin":367270,"position":5},"title":"Moving Rainbow Underlines","date":"December 23, 2019","format":false,"excerpt":"I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not scroll-jacking \u2014 it's just a minor design feature that uses scroll position to enact a little movement. To draw the rainbows themselves, we could\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/rainbow-stripes.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/367270"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=367270"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/367270\/revisions"}],"predecessor-version":[{"id":367276,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/367270\/revisions\/367276"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/332489"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=367270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=367270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=367270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}