chrome: CSS `translateX` resets on anchor tag click-CodePudding

I have a long, single-page site with many content sections.

There's a menu on the left that opens up with an animation, and when open it shifts the content section-wrapper to the right, so that the menu doesn't cover the content.

When I click a menu item, it scrolls to that section via native anchor tag (<a href="#section1">Section 1</a>)

The anchor tag navigation works fine, but when clicked the translateX for the section-wrapper resets with no changes in the CSS applied. Looking at the computed styles for the element in DevTools, it has no changes.

See video here: https://twitter.com/MartinHN/status/1538969557930491910

Minimal example here:

html {
  scroll-behavior: smooth;
  scroll-padding-top: 74px;
}

.menu {
  position: fixed;
  background: green;
  padding: 20px;
  z-index: 999;
}

.section {
  min-height: 400px;
  margin: 20px;
  background: red;
}

.wrapper {
  -webkit-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -moz-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -o-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
}

body.menu-open .wrapper {
  transform: translateX(95px);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body >
  <div >
  <a href="#test1">test1</a>
  <a href="#test2">test2</a>
  </div>
  <div >
  <br />  <br />  <br />  
  
  <div  id="test1">test1</div>
  
    <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />
    <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />

  <div  id="test2">test2</div>
  </div>
</body>
</html>

See on JS Bin: https://jsbin.com/cafedesija/1/edit?html,css,output

It works as expected in Safari, but in Chrome/Brave it doesn't maintain the transform when clicking the test1 and test2 links.

CodePudding user response：

According to the example, everything works quite "correctly" and this behavior is not only in Chromium-based browsers but also in Firefox. The example shows that when you do transform: translateX() on the inner element, the page may have a horizontal scrollbar. Accordingly, when you follow the link, the browser scrolls not only the vertical scroll, but also the horizontal one.

If you do not change the HTML structure, then a similar problem can be solved with the help of scroll-margin-left. For example, in your case, with a value of scroll-margin-left: 99999px you can fix the horizontal scroll to the left side, when scrolling on the anchor. See example below:

html {
  scroll-behavior: smooth;
  scroll-padding-top: 74px;
}

.menu {
  position: fixed;
  background: green;
  padding: 20px;
  z-index: 999;
}

.section {
  min-height: 400px;
  margin: 20px;
  background: red;
  scroll-margin-left: 99999px;
}

.wrapper {
  -webkit-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -moz-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -o-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
}

body.menu-open .wrapper {
  transform: translateX(95px);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body >
  <div >
  <a href="#test1">test1</a>
  <a href="#test2">test2</a>
  </div>
  <div >
  <br />  <br />  <br />  
  
  <div  id="test1">test1</div>
  
    <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />
    <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />

  <div  id="test2">test2</div>
  </div>
</body>
</html>