Having some trouble with my WordPress website bmfconstruction.com.au/new/. In the project section, all images are loading correctly in Chrome, Opera, and IE. However, when it comes to Firefox, none of the images seem to be showing up. I've tested this issue on various versions of Firefox and have even tried disabling all WordPress plugins, but nothing seems to be working. Can anyone provide some assistance in figuring out what might be causing this problem?
Appreciate any help, Mahendra
It seems like the filter greyscale.svg is causing your issue.
You can try updating the code as follows:
.portfolio-item .portfolio-image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover !important;
display: block;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(grayscale.svg); /* Firefox 4+ */
filter: gray; /* IE 6-9 */
overflow: hidden;
padding-bottom: 65%;
position: relative;
}
Alternatively, you could use this code to address compatibility with Firefox:
.portfolio-item .portfolio-image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover !important;
display: block;
filter: url("grayscale.svg");
-moz-filter: url("grayscale.svg");
overflow: hidden;
padding-bottom: 65%;
position: relative;
}
During my testing, I found success with the following code snippet:
.portfolio-item .portfolio-image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover !important;
display: block;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
overflow: hidden;
padding-bottom: 65%;
position: relative;
}
Currently, I have a list created using material-ui which contains numerous items and displays a scrollbar due to its size. I am looking for a way to automatically scroll to the selected item within the list. Does anyone have any suggestions on how I can a ...
After successfully installing the UIKit npm package within an Angular 2 CLI project, what steps should I take to utilize it? I have also installed typings for UIKit (@types/uikit), but I am unsure of how to properly import the package into a controller i ...
Having trouble obtaining code coverage results using Cypress in my Virtual Machine (Debian Bullseye), but no issues when I run the same project on my Windows machine. On Linux, the code coverage shows up as: Click here to view Index.html inside lcov-repor ...
Can someone assist me in replicating the zooming effect demonstrated in this code snippet: `http://codepen.io/docode/pen/EjyVQY`. I am specifically focusing on the zooming feature of this slideshow. How can I replicate this zooming effect in JS rather t ...
Struggling with a coding issue for hours now and in need of some assistance. The challenge at hand involves creating an object named Rank. Rank is expected to make DB calls in mongodb to retrieve data needed to populate a matrix, followed by executing nes ...
I am facing an issue with my selenium test related to a date picker on a webpage. The task is to select a specific date (e.g., 14/2/2012) by clicking on the correct day. However, the date picker is generated using jQuery as shown in the code snippet belo ...
I am currently experiencing an issue with sessions while using auth authentication. My next-auth version is 4.0.0-beta.4 (also tried beta.7 with the same results). My backend utilizes a custom JWT token system that returns an object containing an access t ...
I would like to know if it is possible to flip the background image of a section that contains both a navbar and a row in Bootstrap 5. I am aware of using <<transform: scaleX(-1)>> but this flips all the container elements. Is there a way to ac ...
I have encountered an issue where using a jquery-ui checkbox within a container that has the class ui-widget-content is causing a problem with the CSS rules. Specifically, the ".ui-widget-content .ui-state-hover" rule is overriding the .ui-icon-check rule, ...
Is there a way to adjust the content to fill in the margin space when the browser is resized smaller? http://jsfiddle.net/denWG/62/ Html: <div class="jp-sleek jp-jplayer jp-audio"> <div class="jp-gui"> <div class="jp-controls jp-ico ...
Here is the HTML code I am working with: <div id='parent' align='right' dir='rtl' style=padding:0px;margin:0px;font-weight:bold;width:300px;height:auto;min-height:300px; "'<div align='right' dir='rt ...
How can I display my JSON data on an HTML page using this JavaScript code? $.ajax({ url : 'auth.json', type: "GET", dataType : "jsonp", success: function(result) { $.each(result, function(i, v) { // Loop through each record in ...
I'm attempting to relocate an element within another in order to enable a css :hover effect. <ul> <li id="menu-item"> //move into here </li> </ul> <div class="tomove">...</div> 'tomove' is set to dis ...
Currently, I am in the process of configuring protobuf to work with typescript. According to the official Google Documentation, all that is needed is to execute npm install google-protobuf and then to include require('google-protobuf'). Unfortu ...
Within a multi-page template setup in a jQuery mobile application, an issue arises after navigating away from the first page using panel navigation. Upon returning to the first page through another form of navigation, the panel appears "hanged." Upon clos ...
On my cart page, I utilize ajax to retrieve destination information from the user and provide them with shipping options to calculate their shipping cost. While everything is functioning properly, one issue remains: I am unsure of how to iterate through t ...
Hey everyone, I've got a Mega Menu below for you to check out! <div id="menu-wrapper"> <ul class="nav"> <li><a href='#'>Brands</a> <div> <div class="nav-colu ...
I've encountered an issue while trying to concatenate a URL, resulting in unexpected output. Below you'll find the code I tested along with its results. As I am currently testing on a local server, the desired request URL is http://127.0.0.1:800 ...
Trying to integrate a FireBreath plugin object into an AngularJS view is causing an error when attempting to render the view: TypeError: Cannot read property 'nodeName' of undefined The object can be successfully included in the view using $com ...
I have a unique setup with two nested divs that are both draggable. When I move the parent div (moveablecontainer), the child div (box.opened) follows smoothly as programmed. Everything works well in this scenario. However, when I resize the browser windo ...