CODEWITHSUNDEEP
htmlcsswordpresswebkit
Matthew Incardona
Matthew Incardona

Reputation: 1

Text Gradients Not Working in Edge and Safari

I'm trying to create a text gradient in WordPress (I'm using SiteOrigin pagebuilder), but it doesn't work in Edge or Safari; the text has no color in either browser.

I've tried these suggestions: CSS3 Text Gradients not working? Gradient not working in Safari

But both solutions just gave me a linear background gradient, not a text gradient.

Here's the code I'm currently using:

<style>
.flip-up {
  /*background: linear-gradient(90deg, #97b3e1ff, #c5c95df0);*/
    background-image: linear-gradient(90deg, #97b3e1ff, #c5c95df0);
    -o-background-clip: text;
    -ms-background-clip: text;
    -moz-background-clip: text;
  -webkit-background-clip: text;
    -o-text-fill-color: transparent;
    -ms-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}
</style>

The text animations have been tested on their own (I'm using the Scroll Triggered Animations plugin); they work just fine in every major browser, so I know that's not the problem. My website is https://douxdolci.com/ (headers like "Affordable and Effective" are the problem). Any help would be appreciated!

Also: If there's no way to accomplish this, is there a way to use solid-color text in just Edge and Safari, but a gradient in all other browsers?

Upvotes: 0

Views: 947

Answers (2)

Hữu Phong
Hữu Phong

Reputation: 1603

flex or inline-flex are the problems. Text gradient is not working when you are using flex elements. Instead: using block or inline-block.

Sorry, I am using TailwindCSS for a long time.

Upvotes: 0

Trunk
Trunk

Reputation: 756

What you have to do is display: block; the element(s) containing the text you want color-gradiented.

Be aware that this means that you may now have to vertically center text with the line-height attribute and align text horizontally with text-align . . .

Safari and Edge need it this way - don't go figure, just go do it !

The logotype in this pen shows a simple example.

Please advise if it breaks in Safari - I shudder to imagine how Lambda Test may render it.

HTML

<body>
    <header>
      <div class="logodiv">
        <div class="logo">
          <img src='https://images.unsplash.com/photo-1593003520833-5c874a3cef28?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='My Logo'/>
        </div>
        <div class="logotext">
          <div class="logotext1">Coca-Cola</div>
          <div class="logotext2">The Real Thing</div>
        </div>
      </div>
            <nav>
                <ul class="navbar">
                    <li id="redlink" onclick="PAGE.switchPage('redlink')" class="link on">
                        RED
                    </li>
                    
                    <li id="whitelink" onclick="PAGE.switchPage('whitelink')" class="link">
                        WHITE
                    </li>
                    
                    <li id="bluelink" onclick="PAGE.switchPage('bluelink')" class="link">
                        BLUE
                    </li> 
          
                </ul>
        
            </nav>  
        
        </header>
        
        <article>
            <section id="redpage" class="redpage band">
        THIS IS RED PAGE FULL OF STUFF
            </section> 
            <section id="whitepage" class="whitepage band hidden">
                THIS IS WHITE PAGE FULL OF STUFF
            </section> 
            <section id="bluepage" class="bluepage band hidden">
                THIS IS BLUE PAGE FULL OF STUFF
            </section> 
        </article>
        
    <footer>
      <div class="foot-cont">Oh . . . What An Awful Footer !
      </div>
    </footer>
</body>

CSS

html {
    writing-mode: horizontal-tb;
    box-sizing: border-box;     /* Keeps borders inside the element bounds. */
    font-size: 62.5%;           /* Allows 1 rem = 10px in child and nested elements */
}

*, *:before, *:after {
    box-sizing: inherit;
}

* {
      margin: 0;
    padding: 0;
}


body{
    text-align: center; 
    margin: 0 auto;
    height: auto;
    font-family: Open Sans, sans-serif;
    font-size: 1.4rem;
    color: #000; 
    background-color: orange;
}

header{
  margin: 0 auto;
    display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
    width: 95%;
    height: 150px;
    font-weight: bold;
    text-align: left;
}

.logodiv {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  width: 45%;
  height: auto;
}

.logo {
  width: 30%;
  height: auto;
}

.logo img {
  width: 70%;
  height: 100px;
}

.logotext {
  display: flex;
  flex-flow: row wrap;
  justify-cintent: center;
  align-content: center;
  align-items: center;
  width: 70%;
  height: auto;
  font-size: 5.0rem;
}

.logotext1 {
  display: block; /* VITAL for Safari & Edge */
  width: 100%;
  height: 80px;
  line-height: 1.0;
  font: Lora;
  color: red;
  background-image: -webkit-linear-gradient(45deg, purple, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logotext2 {
  display: block; /* VITAL for Safari/Edge */
  width: 100%;
  height: 35px;
  line-height: 1.0;
  font-size: 3.0rem;
  font-style: italic;
  letter-spacing: 0.3rem;
  background-image: -webkit-linear-gradient(45deg, #111B61, #C8A2C8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

nav{
    display: block;
    width: 55%;
} 

.navbar{
    display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
    width: 100%;
    height: 40px;
    list-style-type: none;
    text-align: justify;
    font-size: 14px;
    margin: 0;
    padding: 0;
    font-weight: bold;
    color: #FFFFFF;
}

nav li {
  position: relative;
  width: auto;
  height: 40px;
  margin-left: 15%;
  cursor: pointer;
}

nav li::after {
   position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    content: '';
    height: 2px;
    width: 0;
    background-color: #00FFFF;
    opacity: 1;
    transition: height 1300ms, opacity 1300ms, width 1300ms;
}

nav li:not(.on):hover::after {
  width: 100%;
  height: 2px;
  opacity: 1;
}

.on::after {
    text-decoration: none !important;
    cursor: none;
} 

.on::after{
    width: 100%;
  height: 2px;
  opacity: 1;
}

.on {
    cursor: none;
    pointer-effects: none;
}


article{
  width: 95%;
  margin: 0 auto;
}

.band{
    height: 800px;
  font-weight: 600;
  font-size: 4rem;
  color: gold;
  text-align: center;
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
  
}

.hidden{
    display: none;
}

.redpage{
    background-color: #FF0000;
}

.whitepage{
    background-color: #FFFFFF;
}

.bluepage{
    background-color: #0000FF;
}

footer{
  margin: 0 auto;
  width: 95%;
  text-align: center;
  height: auto;
  background: #000;
}

.foot-cont{
  height: 100px;
  font-size: 1.4rem;
  font-style: italic;
  color: #FFF;
  display: flex;           /* Important here, heh-heh */
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}

JS

const PAGE = ( () =>
{
  const switchPage = (pagelink) =>
  {
    const onLink = document.getElementsByClassName("on")[0];                // Find current nav link element
    const oldPageId = (onLink.id).substring(0,                        // Get id of corresponding page ...
                          (onLink.id).length - 4) + "page";             // ... by replace "link" with "page" 
    const newPageLink = document.getElementById(pagelink);                  // Find new nav link, i.e. link clicked on
    const newPageId = (newPageLink.id).substring(0, 
                          (newPageLink.id).length - 4) + "page";        // Deduce id of corresponding page
    if (oldPageId != newPageId)                                                                         // Only reload when clicking on different page
    {
      onLink.classList.remove("on");                                                                // Remove active status from old nav link
      newPageLink.classList.add("on");                                                          // Show new nav link as active page
      document.getElementById(oldPageId).classList.add("hidden");       // Hide old page content
      document.getElementById(newPageId).classList.remove("hidden");    // Display current page content
    }
  }
  
  return { switchPage: switchPage };
  
}) ();

Upvotes: 1

Related Questions