ScrollChor doesn't seem to work with styled.button

[kimfucious]

Hi there,

I'm probably doing something dumb, but this one has me stumped.

I've got a styled.a component that I'm using as a button.

import styled from "react-emotion";
import { fontSize, space } from "styled-system";
import "typeface-exo-2";

export default styled.a`
  ${fontSize};
  ${space};
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 0.33em;
  border-style: solid;
  border-width: 1px;
  color: white;
  font-family: "Exo 2", sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  opacity: 1;
  text-decoration: none;
  transition: background-color 0.15s ease-in;
  text-transform: uppercase;
  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
`;

Scrollchor works beautifully when I do this:

<Button>
  <Scrollchor to="#ss-signup" animate={{ offset: 0, duration: 500 }}>
     soul surfer
  </Scrollchor>
</Button>

However, if I change the styled anchor component to export default styled.button ScrollChor stops working.

I've tried various things with "type=button" and role="button", and I've tried surrounding the Scrollchor element in an <a> tag, but nothing seems to get that working.

Again, it's probably something stupid, but I thought I'd ask :smile:

[bySabi]

Hi @kimfucious could you provide a example repository?

[kimfucious]

Hi @bySabi,

Thanks much for the follow up.

I made an interesting discovery while trying to work through this. When the styled component is set to styled.button Scrollchor works just like magic in Chrome and Safari but not in Firefox (v 60.0.2). When it is set to styled.a Scrollchor works in all three browsers.

You can find the repo I'm working on here. The demo website is here.

I'm using Scrollchor in several places, but checkout the src/pages/index.js file on line 32 so that we're looking at the same thing. The Button component can be found at src/components/button.js, and the styled component is currently set to styled.button.

To see the behavior, click the Soul Surfer button in the center of the page. This should scroll to a section below. Again, the issue is that it's not--for some reason I don't understand--working in Firefox.

[bySabi]

@kimfucious I don't know for sure is this behavior, on Firefox, is a bug or just that is W3C Standard compliance. It was reported in stackoverflow: https://stackoverflow.com/questions/26402033/missing-click-event-for-span-inside-button-element-on-firefox An there are several bugs report on Firefox Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=843003 , https://bugzilla.mozilla.org/show_bug.cgi?id=1089326

Maybe you can found a solution there or just use styled.a or "normal", not childrenless, Scrollanchor, ...

I hope this help Please tell me how it was.

Good job with your landing, I like it 👍

[kimfucious]

Hi @bySabi,

I appreciate your checking into this!

I implemented a work-around by replacing the buttons that I scroll with with an anchor, rather than a button. This seemed a lot easier than battling with Firefox.

And thanks for the compliment on the landing page :smile: