issue with IE's (Internet Explorer) filter invert function not functioning

Why does the filter invert not work in Internet Explorer (IE)?

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
</script>

<style>
    .normalColor {
        filter: invert(0%);
    }
    .invertedColor {
        filter: invert(100%);
    }
</style>
</head>

<body>
<U><b>Normal image</b></U><br>
<img id="home" src="image.png" alt="Smiley face" width="500" height="300" class="normalColor">
<br>
<U><b>Invert image</b></U><br>
<img id="home" src="image.png" alt="Smiley face" width="500" height="300" class="invertedColor">
</body>

</html>

View the image

Answer №1

CSS filters are typically supported in WebKit and Firefox but not in IE or Opera. Currently, WebKit remains the sole browser supporting CSS filters.

Unfortunately, there is no simple solution to make this work in IE, as it no longer supports the legacy IE filters.

Answer №2

There might be a similar question on this topic at Invert filter not working on IE and safari. Give the suggested solution a try.

Another tip is to familiarize yourself with this helpful tool: https://caniuse.com/#feat=css-filters.

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

Empty Github page displayed on individual professional website

Hello everyone, I am new to development. I recently put together my own personal portfolio and stored it in this GitHub repository -> https://github.com/LuisssM/Portfolio. However, when I try to launch the website at , it shows the content of the read-m ...

Connecting to a port in node.js is not possible

Currently, I am using port 4200 for my Angular application and port 3000 for my Node.js server. However, I am facing an issue where when I run the Angular application, the Node.js server does not work and I encounter a "Connection refused" problem. Can a ...

Targeting child elements with CSS selectors

In my ecommerce software, I have a menu that I want to customize by making the main categories bold. I have attempted various methods, including the ones shown below, but I am struggling to target the correct elements (specifically those in capital letter ...

Tips for Formatting Mandatory Message Input Fields and Text Boxes

I am in the process of creating a contact page for my Reactjs website, but I am unsure how to style the required message that should appear below the input or textarea upon clicking Submit. Can anyone guide me on how to achieve this? Relevant Code <for ...

The package.json file is being overlooked by NPM when it comes to the jQuery

Something seems to be off when I try to run 'npm install' in my Angular 4 project. It's not recognizing the jQuery version specified in my packages.json file and instead installing version 1.7.4. I specifically have 2.2.4 mentioned in packa ...

Tips for placing multiple images onto one canvas

I am currently working on a web application that allows users to create sketches, define their positions and sizes, and then save them to a database. In another section of the website, I aim to retrieve these images and display them on a single canvas. To ...

Dynamically modifying the display format of the Angular Material 2 DatePicker

I am currently utilizing Angular 2 Material's DatePicker component here, and I am interested in dynamically setting the display format such as YYYY-MM-DD or DD-MM-YYYY, among others. While there is a method to globally extend this by overriding the " ...

What is the best way to transmit a response from PHP to Ajax?

A JavaScript function is used here that utilizes the POST method to send form data to PHP. The PHP script then checks this data in a database to verify its authenticity. However, there seems to be confusion on how to convey the response from PHP back to Ja ...

Changing the background color using jQuery switch case statement

I am attempting to utilize jquery to dynamically change the background image of a webpage based on different cases in a JavaScript switch statement. I have completed three steps: 1) Included this script tag in my HTML document: <script src="http://co ...

What is the best way to show a message next to a text box in a form?

I have a form called test.php with two buttons for entering an email ID and user ID, as well as a submit button. Upon clicking the submit button, my code checks if the email ID exists and displays a message to the user. I want to show this message next to ...

JQuery Accordion SubMenu/Nested Feature malfunctioning

I have successfully implemented a JQuery Accordion on my website and it is functioning properly, opening and closing as expected. However, I am facing an issue when trying to add a submenu within the accordion. The submenu does not work as intended and lac ...

Linked Dropdownlists Connected to a Single Dropdownlist

I am struggling to find the best way to phrase my question, but I need some help. I want to connect three dropdown lists together in a specific way. Dropdown list 2 and 3 should be disabled so the user cannot interact with them, while dropdown list 1 remai ...

Extracting data types from strings in JavaScript

I have been developing a project using HTML and JavaScript where I need to extract two strings from the HTML script, pass them to JavaScript, and convert them into their respective variable types similar to using typeof. For instance, "true" shou ...

Retrieve the output of forkJoin subscription in Angular 6 using rxJs 6

A Straightforward Example: const tasks = []; for (let i = 0; i < this.initialData.length; i++) { tasks.push( this.taskService.getDetails(this.id1[i], this.id2[i]) }; combineLatest(...tasks).subscribe(taskGroup => { console.log(task ...

Showing nested routes component information - Angular

I am working on a project that includes the following components: TodosComponent (path: './todos/'): displaying <p>TODO WORKS</p> AddTodosComponent (path: './todos/add'): showing <p>ADD TODO WORKS</p> DeleteTo ...

Using jQuery's AJAX method: How to access a referenced element outside of a closure

Here is the code snippet I am using to make an ajax call: I am trying to figure out how I can access the target element. Declaring a target element does not seem to work, possibly because I am defining the function handler outside of the click event handl ...

Creating a Conditional Structure in HTML: A Step-by-Step Guide

My website is in need of a form that can identify the user's role based on their name input. This feature is essential for individuals with private roles. Is it possible to achieve this using HTML alone, without relying on JavaScript? If not, what st ...

Required Ionic form field alert

Currently, I am developing a new app using ionic 3 and I am facing an issue with making inputs mandatory in my ionic-alert controller. Despite going through the ionic-component documentation and api documentation, I couldn't find a solution on how to ...

Delete the gridline of the column

I'm struggling to remove the border that is encircling my image thumbnail label. I attempted to create a new class "noborder" and added it under my .col-md-4.noborder css rule, setting the border to 0 none and box-shadow to 0 none but unfortunately it ...

Customize the columns of your Angular Material 2 table by defining them using TemplateRef and ngTemplateOutlet

Looking to create a flexible material table with the ability to utilize TemplateRef along with ngTemplateOutlet for generating columns. Check out this demo where I have employed the cards component within my custom material-table component. Inside the card ...