CODEWITHSUNDEEP
htmlcssamp-html
Trenton Telge
Trenton Telge

Reputation: 488

AMP <a> tags are being hidden by :root CSS

I'm working on the AMP website http://trentontelge.com/. I have SVG social media links in <a> tags at the bottom of the page. Google's AMP validator says the page is valid code, and everything else displays properly, but for some reason, AMP is generating some CSS and appending to my <head> that display:none's the anchors for my social links. How do I stop this from being appended?

Here is the code for one of the links:

<a class="social-link" itemprop="sameAs" target="_blank" rel="noreferrer" href="https://github.com/trenton-telge">
    <amp-img layout="responsive" width="1" height="1" alt="GitHub" class="social-button-img" src="./img/social/github.svg" >
        <div fallback>GitHub</div>
    </amp-img>
</a>

and CSS:

.social-button-img{
        margin: .05in;
        max-height: 15vw;
        max-width: 15vw;
        height: .7in;
        width: .7in;
    }


    /* unvisited link */
    .social-link:link {
        opacity: 1;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
        transition-timing-function: ease-in-out;
    }

    /* visited link */
    .social-link:visited {
        opacity: 1;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
        transition-timing-function: ease-in-out;
    }

    /* mouse over link */
    .social-link:hover {
        opacity: .5;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
        transition-timing-function: ease-in-out;
    }

    /* selected link */
    .social-link:active {
        opacity: 1;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
        transition-timing-function: ease-in-out;
    }

And here is the script that is being appended to the bottom of my <head>

<style type="text/css">
    :root [href^="https://www.amazon."][href*="tag="],
    :root .social-link,
    :root img[alt="Facebook"],
    :root img[alt="Google+"],
    :root img[alt="LinkedIn"]
        { display: none !important; }
    :root *[xsscq7p][hidden] { display: none !important; }
</style>

Upvotes: 0

Views: 106

Answers (1)

fstanis
fstanis

Reputation: 5554

Your page appears to be valid AMP and I'm unable to reproduce what you're describing on my PC.

Perhaps most importantly, the <style> tag that you're referring to most likely isn't added by AMP. The only CSS added by AMP is in amp.css and searching the AMPHTML repo for "social-link" yields no results. My best guess is that it's added by a browser extension (perhaps some ad / tracking blocker) or something similar. Can you try to reproduce in a different browser or on a different device?

Upvotes: 1

Related Questions