Description of the issue:
scroll-margin-top works differently in Brave than in Chrome or Safari.
With the CSS below, both Chrome and Safari properly scroll to in-page targets with the appropriate scroll-margin-top. Brave is off (too small a margin) by 1rem or so.
Why would Brave behave differently with this kind of CSS?
/* https://css-tricks.com/how-to-create-a-shrinking-header-on-scroll-without-javascript/
*/
header {
position: sticky;
top: -35px;
z-index: 99;
}
header > div {
height: 65px;
position: sticky;
top: 0;
}
:target {
scroll-margin-top: 5rem;
-webkit-scroll-margin-top: 5rem;
}
Exact URL of the website in question:
Visit http://emsoftware.com/products/wordsflow/ and then using the top menu, click “Install”. Brave doesn’t scroll enough, so the top section separators are showing (the “* * *”). Chrome and Safari scroll just fine and the separators aren’t showing.
Did the issue present with default Shields settings? (yes/no)
Shields don’t matter.
Does the site function as expected when Shields are turned off?
Shields don’t matter.
Is there a specific Shields configuration that causes the site to break? If so, tell us that configuration. (yes/no):
No.
Does the site work as expected when using Chrome?
Yes, and Safari as well.
Brave version (check About Brave):
1.80.124