Enabling or Disabling CSS Background Clip Support for Internet Explorer

Applying background-clip to text is effective on most browsers, except for IE!

.main-menu .nav li a {
    font-family: freight-big-pro, serif;
    font-size: 4rem;
    font-weight: 400;
    color: #0f0e0e;
    text-decoration: none;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#cfac7e), color-stop(50%, #cfac7e), color-stop(50%, #0f0e0e));
    background-image: linear-gradient(0deg, #cfac7e, #cfac7e 50%, #0f0e0e 50%);
    background-size: 100% 200%;
    background-position: 0% 0%;
}

In IE11, the text appears as a black box with illegible text, although the animation itself functions without clipping.

Since background-clip doesn't work on text in IE, is there a way to disable this specifically for IE?

htmlcssinternet-explorer

Answer №1

You mentioned that on IE11, the animation works but it appears as a black box with unreadable text, and it's not clipping correctly.

To address this issue for IE 11 browser and ensure proper display in all browsers, I recommend trying the -webkit-background-clip: text Polyfill.

Here is an example:

<!doctype html>
<html>
<head>
<script src="https://raw.github.com/TimPietrusky/background-clip-text-polyfill/master/background-clip-text-polyfill.js"></script>
<style>
// Styling code here
</style>
<script>
// JavaScript code here
</script>
</head>
<body>
// Body content here
</body>
</html>

Output:

https://i.sstatic.net/BTvn5.png

Reference:

-webkit-background-clip: text polyfill

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for me to create a list in alphabetical order beginning with the letter B instead of A

My task involves creating a summary of locations using the Google Maps API. The map displays letters corresponding to different waypoints, and I have a separate <div> containing all the route information. Currently, I have the route information stru ...

javascriptphpjqueryhtml

The height of a div element does not automatically default to 100% in Next.js

I'm encountering an issue with styling pages in next.js. My goal is to create full-height pages. Although I've successfully set the height attribute in the body and html tags to achieve full height (verified in dev tools), I'm struggling to ...

htmlcssnext.js

What is the process for including a class along with a data attribute?

Working on implementing data buttons, struggling to make the function operational. Attempting to assign a class to an element through a data attribute and corresponding ID, then wanting to prevent event propagation with the button contained within the subj ...

javascriptcss

Display or conceal Div elements depending on the selected Radio Buttons, with their values retrieved from a database

How can I dynamically Show/Hide Divs based on Radio Buttons with checked values retrieved from a PHP and SQL database? <input type="radio" name="status" value="Ongoing" checked="checked">Ongoing<br> <input type="radio" name="status" value ...

javascriptphphtmlsql

Encountering an 'undefined' error while attempting to showcase predefined JSON data on an HTML webpage

As I try to display the predefined JSON data from https://www.reddit.com/r/science.json on an HTML page, I keep encountering the message "undefined." Below is a snippet of my HTML code: $.getJSON('https://www.reddit.com/r/science.json', funct ...

javascripthtmljson

What is the best way to define a margin according to the size of the device being used

I am working on an angular/bootstrap web app and need to set a left margin of 40px on md, xl, lg devices and 0px on sm device. I attempted to create a spacer in styles.scss like this: $spacer: 1rem; .ml-6{ margin-left:($spacer*2.5); } Then in my HTML, ...

cssangularbootstrap-4

Navigation element is not displayed on the page upon loading

Is there a way to make the default <li> element appear in a Bootstrap-4 Nav menu? I have included the Bootstrap css reference, as well as references to node jquery.min.js and bootstrap.min.js. The example at https://codepen.io/jek/pen/BoWNRy works ...

htmlbootstrap-4nav

Unable to utilize a Vue.js component's methods

I've been working on creating a sidebar menu using Vue.js with toggle methods. The idea is that when a link is clicked, the v-on attribute is used to access a method from the instance. This method emits the word 'isToggled', and then the men ...

htmlvue.jsvue-component

Adjust the color of the text alongside the checkbox

How can I change the text color and content next to a checkbox? <div style="float: left;"> <input type="checkbox" id="idCheckbox1" onClick="myCheckbox('idCheckbox1')" value=1><label>Checkbox 1</label></input>< ...

javascripthtmlcheckboxinputstyles

The Google map is not showing up on the screen despite having entered the API Key

Trying to showcase a Google map on my website. Check out the code below:- <script> function initializeMap() { var coords = {lat: -25.363, lng: 131.044}; var mapObj = new google.maps.Map(document.getElementById('mapz') ...

javascripthtmlgoogle-maps

Implementing class styles using jQuery; however, certain styles fail to be effectively applied

As a beginner, I am experimenting with applying CSS class styles using jQuery. Specifically, I am trying to set two class attributes: color and font size. Surprisingly, only the color attribute is being applied despite both attributes being defined under t ...

jqueryhtmlcss

Conceal Primeng context menu based on a certain condition

I'm struggling to prevent the context menu from showing under certain conditions. Despite following the guidelines in this post, the context menu continues to appear. My goal is to implement a context menu on p-table where it should only show if there ...

htmlangulartypescriptfrontendprimeng

Invoking a function in an Angular 4 component using a <td> element

Take a look at this block of code: personListComponent.html <tr *ngFor="let person of personService.getPersons()"> <td (onShow)="getCountry(person)">{{person.name}}</td> <td>{{country}} </tr personListComponent.ts ...

htmlangulartypescript

What is the best way to eliminate the white space between a background image and a flex footer?

Is my background image causing a gap between it and my flexbox sticky footer? I've tried various methods to fix it, but they only seem to create more issues. Can anyone provide assistance? I have created a placeholder image of the same size as my orig ...

htmlbootstrap-4flexboxbackground-imagesticky-footer

Centered text with custom images in an HTML list

I'm experimenting with customizing lists and currently using a custom list-style-image. I'd like to know how to center the text and image so they are always aligned, even in the case of multi-line text. I've included a picture for reference. ...

htmlcss

Manipulating the size of one div automatically adjusts the size of the other, as they are

I have encountered an issue while trying to manage two resizable divs. I am looking for a solution where changing the size of one div will automatically adjust the size of the other div along the grid, and vice versa. Currently, I am only able to achieve ...

htmlcss

How Web Components interact with innerHTML within connectedCallBack

class Form extends HTMLElement { constructor() { super() } connectedCallback() { console.log(this) console.log(this.innerHTML) } } customElements.define("my-form", Form); I'm currently faci ...

javascripthtmlweb-component

Using jQuery, add an h1 tag to the body element with the ID "home", and an h4 tag for every other body

Hello everyone, I've been utilizing a PHP include to add my header section and I'd like to have my logo enclosed in an h1 for the homepage, and an h4 for the other pages. The homepage is identified by a body ID of "home" while each remaining page ...

jqueryhtml

Creating a CSS style that automatically adjusts the font size within a container that spans the full height of the

Issue: I have a container set to 100vh, but as the screen size changes, I want the font size to adjust accordingly and always stay within the container without overflowing. Thoughts: While I understand this can be achieved easily with @media CSS rules, I& ...

javascripthtmlcss

Customized selection groups for dropdown menu based on alphabetical order

I am dynamically generating a select list from an array of data and I want to group the options alphabetically. For example, here is the data: data = [ ['bcde','21254'], ['abcd','1234'], ['abcde',' ...

javascriptjqueryhtmlselectoptgroup