Firefox issue with scroll-behavior: smooth and Turbo enabled (v8.0.4)
#1255
Comments
|
After playing for a whille with the compiled source code, I think I found the culprit(s) of this bug happening:
focusElement(element) {
if (element instanceof HTMLElement) {
if (element.hasAttribute("tabindex")) {
element.focus(); // Here I added {preventScroll: true}, considering that previous action is scrollIntoView();
} else {
element.setAttribute("tabindex", "-1");
element.focus(); //Same here, added {preventScroll: true}
element.removeAttribute("tabindex");
}
}
}
locationWithActionIsSamePage(location, action) {
const anchor = getAnchor(location);
const currentAnchor = getAnchor(this.view.lastRenderedLocation);
const isRestorationToTop = action === "restore" && typeof anchor === "undefined";
return (
action !== "replace" &&
getRequestURL(location) === getRequestURL(this.view.lastRenderedLocation) &&
(isRestorationToTop || (anchor != null && anchor !== currentAnchor)) // Here I removed condition 'anchor !== currentAnchor'
)
}With stated modifications, smooth scroll started working again on Firefox and Chrome, though I can't tell if this works for other browsers and I also don't know if these can alter something into the internals' functioning (Didn't explore thoroughly the whole code). Made a branch in the repo with a minimal sample reproduction of the modified code. Hoping for this to be reviewed to see if it is an actual and effective fix. Thanks in advance! |
|
I think this is the same issue #698 |
|
I think it is slightly different because #698 states that problem is scrolling to top sometimes doesn't work. In this case, I haven't found any trouble with it, but with non-empty hash URLs when target elements aren't on viewport. As a side note, I also found that visits never end (or delay a lot of time) when trying to scroll via a hash link targeting the current hash ( |
|
@colmexdev I can confirm that your changes above seem to have fixed this for me in Firefox. Thanks! |
Hi there.
Recently, I've been required to smooth scroll over the page depending on hash changing (applying
scroll-behavior: smoothon the HTML tag and anchor tags clicking). While it seems to work fine in Chrome, there seems to be a bug in Firefox (can't test on other browser by now).I created a repo with a minimal sample reproduction of this bug, where I tested with an alternative of using buttons to navigate. Downside here, as per the code used, is that URL is not updated.
On empty anchors (
<a href="#">) and on visible elements (displayed on viewport at the time of click event, like#div1after window load), smooth scrolling works just fine. Nonetheless, whenever the referred elements aren't on viewport, scrolling happens abruptly.If it's strictly necessary to depend on
data-turbo="false", I think I must do it, but it feels smelly to me considering that Chrome needn't this to work.Thank you in advance for your attention!
The text was updated successfully, but these errors were encountered: