1

I'm working on a site that needs full-page scroll-snaps for portfolio items. I got the snap-scroll and HTML smooth-scroll set up and working fine. I then added a link to a Google Font in HTML and set some text to that font in CSS. The font displayed as expected, but it seems to disable the scroll-snap behavior.

I've tried multiple Google fonts and have had the same result each time. It seems that it only disables scroll-snap when the font is correctly installed.

HTML...

<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css">

CSS Below...

body{
    scroll-snap-type: y mandatory;
    color: #222;
}

.tech-list-header {
    font-size: 1.333em;
    font-family: 'IBM Plex Sans';
}

#bgimg-1, #bgimg-2, #bgimg-3, #bgimg-4, #bgimg-5 {
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    /* background-repeat: no-repeat; */
    background-size: cover;
    margin: 0px -10px;
    position: relative;
    min-height: 90vh;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

It seems like I should be able to use Google Fonts and Scroll-Snap in tandem, but I can only get one working at a time... Any thoughts? Thanks!

Alex Evers
  • 11
  • 2
  • I too have run into this, and it seems very bizarre. It also seems to happen in Chrome *and* Firefox, which to me seems like it's a problem with Google Fonts and not a browser bug. The call to Google Fonts is just a short stylesheet, which, it seems, doesn't have anything in it that would conflict with scroll snap. – chipcullen Jun 25 '19 at 01:56

1 Answers1

0

There was a similar question with an answer here: https://stackoverflow.com/a/52886080/1173898

But, to expound on that - the root issue seems to be a conflict between scroll-snap-type and a @font-face declaration. When you link to Google Fonts, all you're linking to is a short CSS file that is composed of one or two @font-face declarations.

Specifically the issue is with a any @font-face declaration with a src: rule and a url(...) value. Which, unfortunately, is pretty much all of the time, and this includes Google Fonts stylesheets.

The other SO answer mentions that it’s Chrome only. However, I've seen the same broken behavior in Firefox.

The way around this, as alluded to in the other SO answer, is to add a wrapper element, inside the <body>, like so:

<body>
  <div class="wrapper">
    <div id="#bgimg-1">
    <div id="#bgimg-2">
    <div id="#bgimg-3">
  </div>
</body>

CSS

.wrapper {
    scroll-snap-type: y mandatory;
}

...

#bgimg-1, #bgimg-2, #bgimg-3, #bgimg-4, #bgimg-5 {
    ...
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}
chipcullen
  • 6,840
  • 1
  • 21
  • 17