New issue
Advanced search Search tips

Issue 884518 link

Starred by 1 user

Issue metadata

Status: Assigned
Owner:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 3
Type: Bug



Sign in to add a comment

scrollIntoView({block: "center"}) undoes transforms

Project Member Reported by ojan@chromium.org, Sep 16

Issue description

Not sure if I got the summary totally right there. Somehow calling scrollIntoView{block: "center"}) removes the translateX from the #content.drawer-open rule. Also, not really sure what component this should apply to. bokan, sending your way for initial triage as I figure you'll know where to send this at least.

<!DOCTYPE html>
<html>
<head>
  <style>
    .panel {
      transition: transform 1s ease;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    #content.drawer-open {
      transform: translateX(250px);
    }
  </style>
</head>
<body>
  <div id=drawer class="panel">drawer</div>
  <div id=content class="panel drawer-open">content</div>
  
  <script>
    // This setTimeout isn't needed to repro.
    // Just make's it easier to see how it should render.
    setTimeout(()=> {
      content.scrollIntoView({block: "center"});
    }, 2000);
  </script>
</body>
</html>
 
Incidentally, I ran into this building a real, non-demo site that has an android drawer using snap.js https://github.com/jakiestfu/Snap.js and the drawer kept closing on me. I had decided Snap.js was just buggy and reimplemented myself using vanilla JS+CSS only to have the same bug. Happy to privately point you at the page if it's helpful.
Status: Assigned (was: Untriaged)
Labels: Hotlist-Interop
Components: -Blink>Animation
Labels: -Hotlist-Interop Hotlist-Polish
There are no animations active on the page, and removing the transition does not appear to change anything. Thus removing animations component.
Ojan, I'm not sure I understand the issue here. When I call content.scrollIntoView the page scrolls to the right as I'd expect since there's overflow. The transform is still there. Am I missing something in the test case?

Sign in to add a comment