{"id":979,"date":"2020-04-25T16:23:39","date_gmt":"2020-04-25T20:23:39","guid":{"rendered":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/?p=979"},"modified":"2021-01-04T14:03:22","modified_gmt":"2021-01-04T19:03:22","slug":"jittery-scrolling","status":"publish","type":"post","link":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2020\/jittery-scrolling\/","title":{"rendered":"Jittery Scrolling"},"content":{"rendered":"\n<p><strong>What:<\/strong> Jittery Scrolling, or very slow scrolling in Chrome-based browsers. It&#8217;s caused by too many paint operations when scrolling, in my particular case caused by an SVG set as a background-image with <code>background-size: cover<\/code> and <code>background-attachment: fixed<\/code>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>How:<\/strong> Remove the <code>background-attachment: fixed<\/code> and use a pseudo-element with <code>position: fixed<\/code> and <code>will-change: transform<\/code>, like so:<\/p>\n\n\n\n<pre class=\"wp-block-code css\"><code lang=\"css\" class=\"language-css\">body {\n  min-height: 100vh;\n  position: relative;\n}\nbody::before {\n  background-image: background.svg;\n  background-size: cover;\n  content: \"\";\n  height: 100%;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  will-change: transform;\n  z-index: -1;\n}<\/code><\/pre>\n\n\n\n<p><strong>Where:<\/strong> Blog post at <a rel=\"noreferrer noopener\" href=\"https:\/\/www.fourkitchens.com\/blog\/article\/fix-scrolling-performance-css-will-change-property\/\" target=\"_blank\">Four Kitchens<\/a> with links to more information.<\/p>\n\n\n\n<p><strong>Thoughts:<\/strong> It feels like a complete hack to me that I have to use a pseudo-element to use position: fixed with a 40kb SVG image to get Chrome to scroll normally. What it feels like is regression. More and more Chrome just really does not seem like a particularly good browser to me and I don&#8217;t understand why people like it so much.<\/p>\n\n\n\n<p class=\"_3bJ2H CHExY\">Photo Credit: Photo of an abandoned train in Garibaldi Oregon. By <a href=\"https:\/\/www.flickr.com\/photos\/blind007\/\" target=\"_blank\" rel=\"noreferrer noopener\">me<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What: Jittery Scrolling, or very slow scrolling in Chrome-based browsers. It&#8217;s caused by too many paint operations when scrolling, in my particular case caused by an SVG set as a background-image with background-size: cover and background-attachment: fixed.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[146,17,148,147,136],"class_list":["post-979","post","type-post","status-publish","format-standard","hentry","category-new-things","tag-chrome","tag-css","tag-four-kitchens","tag-opera","tag-scrolling","infinite-scroll-item"],"_links":{"self":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/comments?post=979"}],"version-history":[{"count":1,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/979\/revisions"}],"predecessor-version":[{"id":1129,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/979\/revisions\/1129"}],"wp:attachment":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/media?parent=979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/categories?post=979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/tags?post=979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}