Do matrix filters in IE7 take into account white space sensitivity?

Utilizing CSS transformations, I am reverting to the following Matrix transform specifically for IE7 and IE8.

filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.0, M12=0.33, M21=-0.33, M22=0.0,sizingMethod='auto expand')

This method functions without issue in all iterations of Internet Explorer. However, when there are no spaces after each comma (which occurs during CSS minimization), I encounter a series of peculiar anomalies on IE7. It appears as though the browser completely disregards definitions for various other classes located elsewhere in the CSS document.

Only IE7 is impacted by this issue, regardless of whether it is native IE7 or IE9 operating in IE7's standards mode.

To work around this obstacle, I can adjust my CSS minification tool to preserve the spaces within this specific rule. Nonetheless, I am eager to comprehend the underlying cause. My assumption is that it may be an IE7 bug; could I possibly be the first person to come across this?

cssinternet-explorerinternet-explorer-7

Answer №1

Today, we encountered a problem that may not be the first time it has appeared. You seem to be the first one to report this issue, although Scott McGhee reported it a month later. This obscure problem doesn't have many references apart from these instances.

Your suspicion that this is a bug in IE7 is accurate; the behavior we observed is indeed unexpected. When you open this fiddle in IE7 or IE7 browser mode, you'll see three orange squares with X's inside them. The sizes of the squares are 25x25px, 50x50px (scaled down from 100x100px and slightly blurred), and 100x100px. Everything looks as expected until you remove the whitespace character mentioned in the fiddle, causing the styling of the second and third elements to disappear.

I suspect that having a space within a string parameter without leading spaces in the entire parameters list triggers this bug. To test this theory, I added another method using blur:

progid:DXImageTransform.Microsoft.Blur(pixelradius=3, enabled='hello world');

If you delete the first space after "enabled=", the bug reappears behind the number 3. Removing the second space after "hello" restores normal functionality. So far, my theory remains consistent.

I haven't attempted this in IE6.

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

Using Masonry with AngularJS templates: A step-by-step guide

Hey there! I'm trying to incorporate masonry into my AngularJS project. I'd like the divs to flow from left to right within their container. The documentation suggests using the following code: <div class="js-masonry" data-masonry-options=&ap ...

htmlcssangularjsjquery-masonry

Two nested divs positioned below text within a parent div

I am styling a content div with text and two child divs positioned next to each other within the content div. My goal is to have the child divs display below the text, rather than beside it. body { text-align: center; } #first, #second { border: so ...

htmlcss

Issue with Jquery's .html() function not functioning properly when trying to select HTML

I am currently working on a piece of code that looks like this: $price = $(element) > $('.main_paket_price').attr('name'); alert($price); Basically, I am trying to select an element inside element which has the class main_paket_pri ...

javascriptphpjqueryhtmlcss

Positioning the filters in jQuery Datatables

I'm currently working with jQuery datatables and I'm attempting to align the filter/search box on the same row as the header of the container holding the datatable. Attached is a screenshot for reference: https://i.stack.imgur.com/nzbIl.png He ...

javascriptjqueryhtmlcssdatatable

Enhancing the appearance of unvisited links with background styles

I am endeavoring to incorporate an icon into all unvisited links on a specific Wordpress category page. Below is the CSS code that I am utilizing. It has been placed at the conclusion of my final CSS file. .category-xyzzy .entry-title a:link { background ...

css

Bringing elements into perfect harmony in Angular

Seeking guidance on HTML alignment using bootstrap for prebuilt components like buttons. Struggling with aligning divs and looking to learn more about grouping them together for proper alignment. Goal is to center elements on screen one above the other. ...

htmlcssangularangular-ui-bootstrap

What is the best way to transform all elements on a webpage into a dynamic scrolling marquee?

Is there a way to make every div in a web application scroll like a marquee? Perhaps by using a specific CSS class or other method? The application is built with Angular 4 and Bootstrap. ...

htmlcssangular

Material UI does not have built-in functionality for displaying colored text within a multiline textfield component in React

Attempting to utilize the material ui library in a react app has brought an issue to light. It appears that styling colored text does not work as expected for multiline textfields. Consider the following scenario: import React, { Component } from 'r ...

cssreactjsmaterial-designmaterial-ui

The bug in Polymer 1.0 where a custom element is causing issues when clicking under the toolbar

Issues have arisen with a custom element I created, named <little-game></little-game>. Here is the template code for <little-game></little-game>: <template> <a href="{{link}}"> <paper-material elevation=& ...

htmlcsspolymerpolymer-1.0

Include new material in the upper-right corner of each row

Struggling with various styling techniques like pull-right, float, and row-fluid, I have come here to seek help: My goal is simple - I want a Map to be displayed on the right side of a set of rows. Currently, it looks like this: Although close to what I ...

htmlcsstwitter-bootstrap-3

Is it possible for HTML/CSS to automatically adjust content size to fit or fill a container?

I'm interested in finding a CSS-only technique that can ensure content within a container scales to fit, regardless of whether it's text or images. Take a look at the example below: .container { display: inline-block; width: 2in; hei ...

htmlcss

Exploring menu options in a responsive web design interface

Hey, I'm having an issue with my website header. It looks great on full-width screens, but I need to address low screen resolutions using @media queries. I have a checkbox that reveals the menu items when checked. However, I'm facing an overlay p ...

htmlcss

Automatically increase the height of a text area as you type beyond the maximum width limit

Is there a way to dynamically expand the textarea width as I type beyond its maximum set width without displaying a horizontal scrollbar? Here is the HTML code in its rendered form: <textarea name="CatchPhrase" class="inp ...

javascriptjquerycssasp.net-mvcrazor

Interactive text animation triggered by a click

jQuery ( function ( $ ) { console.log(">>Testing animation"); $('a.loveit').on('click',function(event){ event.preventDefault(); var text = $(this).find('div.love-text'); ...

jquerycss

Incorporating Cascading Style Sheets (CSS) to

I'm looking to style my form with CSS but I'm unsure of the process. Currently, the form is generated using PHP and MySQL, and in the browser it appears like this: http://gyazo.com/5d099ead9bd6ea83859a5114b2438748 I want to align the text and dr ...

phphtmlcssforms

Leveraging IE conditional comments for including CSS or JavaScript files can lead to an increase in the number of HTTP

Our web designer has implemented special pages for Internet Explorer by using IE-specific comments. This means that certain stylesheets are only loaded if the user is using a specific version of IE: <!--[if lt IE 7]> <link type="text/css" rel="st ...

javascriptcssinternet-explorerconditional-comments

JavaScript Application - Problem with Universal Windows Script

I recently built a website utilizing material design lite for the aesthetics: Here are the scripts included: <script src="./mdl/material.min.js"></script> <script src="Scripts/angular.min.js"></script> The necessary .css fi ...

javascriptcsswindows-10-universalmaterial-design-lite

What method does the CSS standard dictate for measuring the width of an element?

In terms of measuring an element's width, Chrome appears to calculate it from the inner margin inclusive of padding. On the other hand, Firefox and IE determine the width of the box from the border, excluding padding but including the margin. Personal ...

cssinternet-explorerfirefoxgoogle-chromespecifications

Ensure that a span within a cell table has a height of 100%

Is there a way to have the span element expand to full height? Click here <table class="table table-condensed table-hover table-striped"> <thead> <tr> <th class="shrink"></th> <th class ...

csstwitter-bootstrap

`Cannot Get jQuery ScrollTop Function to Work for 2nd Element`

Having trouble with an issue. Let me explain. I implemented a scrollTop Jquery on page load that scrolls down after a delay to prompt user action. However, I'm facing a problem where another scrollTop doesn't work after clicking buttons "#b3,#b3 ...

javascriptjqueryhtmlcss