Web-bugs: spreadprivacy.com - see bug description

[tagawa]

URL: https://spreadprivacy.com/how-to-encrypt-devices/

Browser / Version: Firefox 61.0
Operating System: Mac OS X 10.13
Tested Another Browser: Yes

Problem type: Something else
Description: The "See more tips ..." links in the middle of the page are not clickable in Firefox 60 & 61 (Mac & Linux). Similar links at the bottom of the page are fine. In other browsers (Safari, Vivaldi, Brave) all links are fine.
N.b. This site uses the Ghost blogging platform.

Note: The page at spreadprivacy.com has now been fixed but the browser compatibility issue still exists - see this testcase: https://jsbin.com/zixukasatu/edit?html,css,output

Steps to Reproduce:

1. Open https://spreadprivacy.com/how-to-encrypt-devices/
2. Scroll down to the "See more tips to protect your privacy on Mac" link.
3. Try to click on that link.

_From webcompat.com with ❤️_

[tagawa]

Some analysis by a colleague:

It looks like the h2 header below the link is overlapping due to the margin-top: -75px rule, and chrome and firefox are treating it differently (on chrome it's underneath the link, on firefox it's on top of it).

[karlcow]

Hey @tagawa
Thanks for the report.

Yup there is something off here.

the h2 has a strange style :) Adding and removing the space.

.post-full-content h1, .post-full-content h2, .post-full-content h3, .post-full-content h4, .post-full-content h5, .post-full-content h6 {
    margin-top: -75px;
    padding-top: 75px;
    color: #090a0b;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
}

if I remove both margin and padding

[karlcow]

Chrome has the same layout in terms of boxes, but let the click "go through the boxes".

I'm not sure why. They have exactly the same undefined zindex

[karlcow]

Maybe @dholbert will know if there is already a bug about that or if we should open it.

[tagawa]

Merci beaucoup @karlcow

You're right, it is unusual. That style actually comes from the Casper theme that Ghost uses by default, but I see they've since updated it to remove the conflicting margin and padding.

I can try to make a simplified test case.

[tagawa]

Here's a testcase:
https://jsbin.com/zixukasatu/edit?html,css,output

I'm going to update the page at spreadprivacy.com to fix the issue, but the testcase can still be used for diagnosis so the issue shouldn't be closed yet.

[dholbert]

I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1462539 though I'm not 100% sure if it's technically a bug or not (investigating a bit more).

[dholbert]

As noted on the above-linked Bugzilla bug that I filed, I'm pretty sure Firefox's behavior here is correct, and it looks like other browsers (at least Chrome/Edge) agree with us on all the similar examples I came up with (and Edge agrees with us in all cases including the jsbin testcase). The odd one out is Chrome on this specific flexbox example, where they allow the link to be clicked (even though they don't in other similar cases). So I'll probably file a Chrome bug on that inconsistency in the morning.

[tagawa]

Thanks @dholbert. I can click the link on Safari as well, so it looks like a Blink and WebKit bug.

[dholbert]

I filed https://bugs.chromium.org/p/chromium/issues/detail?id=844505 and https://bugs.webkit.org/show_bug.cgi?id=185771 for Blink & WebKit, respectively.

[dholbert]

@karlcow: I think we can close this, with whatever status is appropriate for "website has been fixed, and the compatibility issue has been reported to the browsers in question".

[tagawa]

Sounds good to me - thank you @dholbert

[karlcow]

Thanks to the two of you. Super work. <3