{"id":338150,"date":"2017-04-12T17:27:28","date_gmt":"2017-04-12T09:27:28","guid":{"rendered":"https:\/\/www.macrumors.com\/2017\/04\/12\/google-chrome-scroll-web-page-jumps\/"},"modified":"2017-04-12T17:27:28","modified_gmt":"2017-04-12T09:27:28","slug":"chrome-browser-gains-scroll-anchoring-to-prevent-annoying-web-page-jumps","status":"publish","type":"post","link":"https:\/\/people.utm.my\/asmawisham\/chrome-browser-gains-scroll-anchoring-to-prevent-annoying-web-page-jumps\/","title":{"rendered":"Chrome Browser Gains &#8216;Scroll Anchoring&#8217; to Prevent Annoying Web Page Jumps"},"content":{"rendered":"<div class=\"body\" readability=\"57.237885462555\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/cdn.macrumors.com\/article-new\/2015\/05\/Google_Chrome_Material_Icon-450x450-250x250.jpg\" alt=\"\" width=\"250\" height=\"250\" class=\"alignright size-medium wp-image-450592\"\/>Google yesterday <a href=\"https:\/\/blog.google\/products\/chrome\/taking-aim-annoying-page-jumps-chrome\/\">announced<\/a> a new feature in the latest update to its Chrome browser that aims to make the progressive loading of web pages less jumpy and annoying.<\/p>\n<p>The idea behind progressive loading is to allow users to begin consuming web content immediately before the page has fully loaded, but the offscreen loading of pictures and so on can cause unexpected page jumps and push down what&#8217;s already on screen, making for a frustrating experience, especially on mobile devices. Google&#8217;s answer to this problem is something called Scroll Anchoring.<\/p>\n<blockquote readability=\"9\">\n<p>Similar to other features designed to protect our users from bad experiences, starting in version 56 Chrome prevents these unexpected page jumps with a new feature called scroll anchoring. This feature works by locking the scroll position on an on-screen element to keep our users in the same spot even as offscreen content continues to load.<\/p>\n<\/blockquote>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"\/\/www.youtube.com\/embed\/-Fr-i4dicCQ\" frameborder=\"0\" allowfullscreen=\"\">[embedded content]<\/iframe><\/p>\n<p>Google claims scroll anchoring is already preventing about three page jumps per page-view, but says it understands there might be some content for which scroll anchoring is either unwanted or misbehaving. For this reason, the feature ships alongside a <a href=\"https:\/\/wicg.github.io\/ScrollAnchoring\/#exclusion-api\">CSS property to override it<\/a>.<\/p>\n<p>While the focus of this feature is on mobile, scroll anchoring is actually also on by default on Chrome for Mac. Meanwhile, Google is encouraging web developers to participate in a <a href=\"https:\/\/github.com\/WICG\/ScrollAnchoring\">community group<\/a> to discuss the feature&#8217;s functionality, offer <a href=\"https:\/\/g.co\/reportbadreflow\">feedback<\/a>, and learn how to design websites or services &#8220;with a no-reflow mindset&#8221;.<\/p>\n<p><a href=\"http:\/\/appshopper.com\/utilities\/chrome\">Google Chrome<\/a> is available to download for free on the <a href=\"https:\/\/www.macrumors.com\/roundup\/app-store\/\">App Store<\/a>. [<a href=\"https:\/\/itunes.apple.com\/us\/app\/google-chrome-fast-secure\/id535886823?mt=8\">Direct Link<\/a>]<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/cdn.macrumors.com\/article-new\/2015\/05\/Google_Chrome_Material_Icon-450x450-250x250.jpg\" alt=\"\" width=\"250\" height=\"250\" class=\"alignright size-medium wp-image-450592\" \/>Google yesterday <a href=\"https:\/\/blog.google\/products\/chrome\/taking-aim-annoying-page-jumps-chrome\/\">announced<\/a> a new feature in the latest update to its Chrome browser that aims to make the progressive loading of web pages less jumpy and annoying.<\/p>\n<p>The idea behind progressive loading is to allow users to begin consuming web content immediately before the page has fully loaded, but the offscreen loading of pictures and so on can cause unexpected page jumps and push down what&#8217;s already on screen, making for a frustrating experience, especially on mobile devices. Google&#8217;s answer to this problem is something called Scroll Anchoring.<br \/>\n<\/p>\n<blockquote><p>Similar to other features designed to protect our users from bad experiences, starting in version 56 Chrome prevents these unexpected page jumps with a new feature called scroll anchoring. This feature works by locking the scroll position on an on-screen element to keep our users in the same spot even as offscreen content continues to load.<\/p><\/blockquote>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/-Fr-i4dicCQ\" frameborder=\"0\" allowfullscreen><\/iframe><br \/>\n<br \/>\nGoogle claims scroll anchoring is already preventing about three page jumps per page-view, but says it understands there might be some content for which scroll anchoring is either unwanted or misbehaving. For this reason, the feature ships alongside a <a href=\"https:\/\/wicg.github.io\/ScrollAnchoring\/#exclusion-api\">CSS property to override it<\/a>.<\/p>\n<p>While the focus of this feature is on mobile, scroll anchoring is actually also on by default on Chrome for Mac. Meanwhile, Google is encouraging web developers to participate in a <a href=\"https:\/\/github.com\/WICG\/ScrollAnchoring\">community group<\/a> to discuss the feature&#8217;s functionality, offer <a href=\"https:\/\/g.co\/reportbadreflow\">feedback<\/a>, and learn how to design websites or services &#8220;with a no-reflow mindset&#8221;.<\/p>\n<p><a href=\"http:\/\/appshopper.com\/utilities\/chrome\">Google Chrome<\/a> is available to download for free on the <a href=\"https:\/\/www.macrumors.com\/roundup\/app-store\/\">App Store<\/a>. [<a href=\"https:\/\/itunes.apple.com\/us\/app\/google-chrome-fast-secure\/id535886823?mt=8\">Direct Link<\/a>]<\/p>\n<div class=\"linkback\">Tag: <a href=\"https:\/\/www.macrumors.com\/roundup\/chrome\/\">Chrome<\/a> <\/div>\n<p><a href=\"https:\/\/forums.macrumors.com\/threads\/google-chrome-scroll-web-page-jumps.2041466\/\">Discuss this article<\/a> in our forums<\/p>\n<div class=\"feedflare\">\n<a href=\"http:\/\/feeds.macrumors.com\/~ff\/MacRumors-All?a=wxMJrDOIrG8:_XU7PPuTK7w:6W8y8wAjSf4\"><img decoding=\"async\" src=\"http:\/\/feeds.feedburner.com\/~ff\/MacRumors-All?d=6W8y8wAjSf4\" border=\"0\"><\/img><\/a> <a href=\"http:\/\/feeds.macrumors.com\/~ff\/MacRumors-All?a=wxMJrDOIrG8:_XU7PPuTK7w:qj6IDK7rITs\"><img decoding=\"async\" src=\"http:\/\/feeds.feedburner.com\/~ff\/MacRumors-All?d=qj6IDK7rITs\" border=\"0\"><\/img><\/a>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/feeds.feedburner.com\/~r\/MacRumors-All\/~4\/wxMJrDOIrG8\" height=\"1\" width=\"1\" alt=\"\"\/> <\/p>\n","protected":false},"author":5817,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[25],"tags":[68,69,59,26],"class_list":["post-338150","post","type-post","status-publish","format-standard","hentry","category-technology","tag-apple","tag-macrumors","tag-media","tag-technology"],"_links":{"self":[{"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/posts\/338150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/users\/5817"}],"replies":[{"embeddable":true,"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/comments?post=338150"}],"version-history":[{"count":0,"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/posts\/338150\/revisions"}],"wp:attachment":[{"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/media?parent=338150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/categories?post=338150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/tags?post=338150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}