Coder Social home page Coder Social logo

css3-mediaqueries-js's People

Contributors

wouterter avatar

css3-mediaqueries-js's Issues

is max-aspect-ratio supported ?

What steps will reproduce the problem?
1. apply a max-aspect-ratio rule :
@media screen and (max-aspect-ratio: 115/75) { ... }


What is the expected output? What do you see instead?
Rules are not applied when the ratio is met. (wether other media query rules in 
the same css - max-width & max-height - work like a charm)


What version of the product are you using? On what operating system?
last version on ie8 / winxp



Original issue reported on code.google.com by [email protected] on 29 Aug 2013 at 4:52

HTML5 tags in IE7 with fixed width invisible on initial load

What steps will reproduce the problem?
1. Create container around page content with a fixed width (#container { 
margin: 0 auto; width: 960px }

2. Make sure to use HTML5 elements inside the #container (<header> and <footer> 
for example)

3. Load the page in IE7. Upon initial load, the header and footer do not 
appear. Only once you move the mouse INTO the content window (<html> or <body>) 
do the header and footer reappear.

What is the expected output? What do you see instead?
Expect these elements to load in, but instead they are not present. Almost like 
if visibility has been set to hidden. Content retains layout, but is just 
invisible.


What version of the product are you using? On what operating system?
There is no specific version stated, so version as of 5/2/2011. Issue is only 
on Windows IE7. Works fine in IE8.

Please provide any additional information below.
Initially encountered problem when setting a fixed width to the #container 
using a media query once the width of the window hit 975px. Started out with 
width 100% and once window width hit 975px, I changed the width to 960px.
If I kept the width set to 100%, regardless of window width, header and footer 
showed up fine. Only when I set a fixed pixel width does issue arise.

I tried eliminating all unnecessary styles and all media queries, and issue 
still occurred. Only after I removed the css3-mediaqueries-js script, did the 
#container size to 960px and header and footer showed up fine. 

My only guess is there's an issue w/ IE7 and the css3-mediaqueries-js when 
initially loading, even if NO media queries are being declared in the CSS.

Note: I am using Modernizr to activate HTML5 elements in IE, etc.

Sorry for the long-winded description :\


Original issue reported on code.google.com by [email protected] on 2 May 2011 at 9:12

Link is broken

What steps will reproduce the problem?
1. Link is broken
2.
3.

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?


Please provide any additional information below.


Original issue reported on code.google.com by [email protected] on 16 Apr 2014 at 6:25

IE7/8 throws: "This page is accessing information that is not under its control. This poses a security risk."

What steps will reproduce the problem?
1. Include Script to page
2. Open Page in IE7/8 mode
3.

What is the expected output? What do you see instead?
Expected - normal behavior, working script;
Actual - IE prompts: "This page is accessing information that is not under its 
control. This poses a security risk.Do you want to continue?", then script 
works.

What version of the product are you using? On what operating system?
Windows 8 with IE10 in IE7/8 mode

Please provide any additional information below.
possibly caused by XMLHttpRequest.
Script would still work whether user have chosen "yes" or "no" on prompt.

Original issue reported on code.google.com by [email protected] on 22 Jan 2013 at 1:39

Hangs IE7/8 with usage of this js library

What steps will reproduce the problem?
1. HTML 5 page full with contents, applied with css
2. LI with fixed width for <960px window size, and % width for more
3.

What is the expected output? What do you see instead?
As does it displayed in IE9, FF5. In IE7,8 it hangs browser, and only body 
background load, nothing else.

What version of the product are you using? On what operating system?
Latest. Downloaded today.

Please provide any additional information below.
I'm using following other js library on page..
jQuery v 1.6.2
hoverintent.js
superfish.js
jquery.placeholder-enhanced.min.js

Only if lt ie9
html5shiv - html5.js
selectvizer
pie.htc

I remove css3 mediaqueries js, and it works fine.

Original issue reported on code.google.com by [email protected] on 24 Aug 2011 at 3:59

SCRIPT5007: Unable to get property 'indexOf' IE8 error

In IE8, I am getting the following error:

SCRIPT5007: Unable to get property 'indexOf' of undefined or null reference 
css3-mediaqueries.js, line 314 character 1

For the unminified script. Is there any way we can use another method other 
than indexOf, which is not supported in IE8 for arrays?

Original issue reported on code.google.com by [email protected] on 13 Aug 2013 at 5:21

Can the script be extended to include links

> What steps will reproduce the problem?

1. Include <link rel="stylesheet" href="media-wide.css" media="screen and
(min-width: 1000px)" /> in the markup, along with css3-mediaqueries.js
2. Resize the window above 1000px.

> What is the expected output? What do you see instead?

I would expect to see the new styles in media-wide.css included. (I now
realize that @media blocks in non-query-enabled link elements are parsed.)

> Please provide any additional information below.

I realize that this would be an enhancement of the existing script.

Original issue reported on code.google.com by [email protected] on 11 Mar 2010 at 12:49

Google Maps API

What steps will reproduce the problem?
1. Add a Google map to site
2. Add css3-mediaqueries.js
3.

What is the expected output? What do you see instead?
Map with scrolling functionality.
Sometimes just static image of map, or nothing displayed at all.

What version of the product are you using? On what operating system?
Latest version i think! Mac OSX Mountain Lion

Please provide any additional information below.

Original issue reported on code.google.com by [email protected] on 13 Nov 2012 at 3:25

@import required for Wordpress Child theme usage

when designing a parent theme with child themes for Wordpress where the 
functionality resides in the parent theme and the child themes are used merely 
for styling sections of the website for a large company's various divisions, 
the use of @import by wordpress to pull in the parent theme's stylesheet is a 
foregone conclusion

if there is truely no way to make this script work with css brought in by 
@import, this will severely curtail its usefulness in a wordpress environment


Original issue reported on code.google.com by webdragon.net on 28 Aug 2013 at 4:06

Not compatible with jquery fittext

What steps will reproduce the problem?
1. create a responsive design
2. apply jquery.fittext.js to a headlng tag as described in its documentation
3. include css3-mediaqueries-js

What is the expected output? What do you see instead?
expected: text should fit and scale as the window resizes based on parent width
instead: on every page refresh font size jumps to a larger size, not sure what 
determines it, but then when the window is resized the fittext kicks in and 
starts to scale. 

What version of the product are you using? On what operating system?
new
mac osx snow leopard

Please provide any additional information below.


Original issue reported on code.google.com by [email protected] on 14 Nov 2011 at 12:56

JSHint or JSLint the code please

I placed the code into JSHint and came across a few issues but the worse two 
are variables being initialised out of scope (within blocks) and one case of a 
line breaking off 3 different if conditions BEFORE && instead of after. The 
latter issue is worrying only because we can't predict the interpreter in that 
case, where it might insert a ; instead of a \n.

I have attached a patch of my changes. The code now validates with JSHint 
(www.jshint.com) with these options checked ONLY:
- Require curly braces around all blocks
- Stop on the first error
- Require variables to be declared before usage
- Browser

Original issue reported on code.google.com by audvare on 21 May 2011 at 5:21

Attachments:

Could do with a minified version

What steps will reproduce the problem?
1.
2.
3.

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?


Please provide any additional information below.


Original issue reported on code.google.com by [email protected] on 18 Mar 2013 at 6:47

iFrame Support

What steps will reproduce the problem?
1. Create a CSS File that uses media queries based on with
2. load that on another page with an iFrame
3. See that the media query is not trigered, works on native browsers

What is the expected output? What do you see instead?
It should notice that the iframe is smaller and use the media query

What version of the product are you using? On what operating system?
Works on latest, chrome, safari and firefox, not on IE 7, 8,9

Please provide any additional information below.


Original issue reported on code.google.com by [email protected] on 13 Jul 2012 at 5:03

Crash occurs when loaded in an iframe in IE9

What steps will reproduce the problem?
1. Loading the mediaqueries js in an iframe in IE9 will send the browser into a 
loop and crash it.

What is the expected output? What do you see instead?
No crash.  Saw a crash.

What version of the product are you using? On what operating system?
IE9 on windows with the latest version of css3-mediaqueries.js (as of 3/25/11)

Please provide any additional information below.
IE9 is out and it still sucks...

Original issue reported on code.google.com by [email protected] on 25 Mar 2011 at 6:22

Doesn't parse stylesheets included in body.

What steps will reproduce the problem?
1. Include Script to page
2. Include Stylesheet reference in body '<link href="style.css" ... />'
3. Open page in IE7/8 mode

What is the expected output? What do you see instead?
Expected - working page normal behavior.
Actual - Script not parsing stylesheet

What version of the product are you using? On what operating system?
Windows 8, IE10 in IE7/8 mode.

Please provide any additional information below.
If Line 406 'document.getElementsByTagName("head")' changed to 
'document.getElementsByTagName("html")' fixes issue for IE8, but not for IE7

Original issue reported on code.google.com by [email protected] on 22 Jan 2013 at 1:47

Does css3-mediaqueries work with print media queries?

What steps will reproduce the problem?
1. Use @media print in css file.
2.
3.

What is the expected output? What do you see instead?
I expect to see the styling when the page is printed in ie8.

What version of the product are you using? On what operating system?
Latest version.

Please provide any additional information below.
I managed to get css3-mediaqueries to work with @media screen, but cannot get 
it to work with @media print. I was wondering if it was supposed to work with 
@media print.


Original issue reported on code.google.com by [email protected] on 16 Aug 2013 at 7:30

returns wrong browser width when using OwlCarousel

What steps will reproduce the problem?
1. Using IE8 and css3-mediaqueries
2. Owl Carousel gets wrong browser width from css3-mediaqueries
3. This does not happen on mozilla, chrome etc.

What is the expected output? What do you see instead?
A full-width carousel. Instead, Owl Carousel shows up full-width but cells do 
not display correctly. This only happens on IE8.

What version of the product are you using? On what operating system?
Windows7 - tested on chrome-mozilla and lte IE8 for compatibility


Please provide any additional information below.
Author of Owl Carousel checked the problem and said that css3-mediaqueries.js 
was returning wrong browser width on load. 


Original issue reported on code.google.com by [email protected] on 7 Oct 2013 at 12:40

Added support for imports and API exposed to notify when dynamic changes occurs

What steps will reproduce the problem?
1. In my project i need to load some css dynamically.
2. I use createImport over a Style.sheet element as a workaround
3. I need to process the imports
4. I need a way to notify changes and refresh cache

What I've done is:
* process the imports at the same point as links.
* create a new object to store the result opposite to use the element
* expose a globla object "cssMediaQueries" with a method "refresh"

Please find attached the modifications.
Nice job, Thank you

Original issue reported on code.google.com by [email protected] on 3 Sep 2013 at 2:49

Attachments:

Not reliable in IE 7

it works only randomly in IE 7. In some cases it doesn't work, in some cases it 
does. Hard to say when or when not because IE is a totally abnormal browser 
where things aren't really reproducible and debuggable.


Original issue reported on code.google.com by [email protected] on 10 Jan 2013 at 12:59

mediaqueries-js error

I've inserted the js into my page like so
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
in my css file I have this:
@media screen and (max-width: 760px){ do stuff }

and in IE8 I have an error popping up

This is the error:
Message: Invalid character
Line: 1
Char: 1
Code: 0
URI: file:///E:/Storefronts/js/css3-mediaqueries.js

and I never got it to load my media queries.
Anyone can help?

thanks a lot


Original issue reported on code.google.com by [email protected] on 2 Jun 2011 at 6:14

New version doesnt work for me

What steps will reproduce the problem?
1. Use the 2 april version 
2.
3.

What is the expected output? What do you see instead?

Media queries stop working

What version of the product are you using? On what operating system?
2 April version - IIS 6.0 with PHP

Please provide any additional information below.
site address www.leapi.com.br

Original issue reported on code.google.com by [email protected] on 7 Apr 2014 at 4:33

Empty page in IE8

What steps will reproduce the problem?
1. IE8, small browser frame size, dont maximize browser. Example: computer with 
resolution 1366x768. 
2. load the page
3. should see IE browser shows error and page empty.

What is the expected output? What do you see instead?
- Expected webpage to load properly, but see empty page

What version of the product are you using? On what operating system?
Window 7, IE8. Have not tested in IE6/7. IE9 working fine so far

Please provide any additional information below.
Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; 
Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; 
Media Center PC 6.0; .NET4.0C; .NET4.0E; AskTbORJ/5.13.1.18107)
Timestamp: Wed, 1 Aug 2012 03:23:34 UTC


Message: Invalid procedure call or argument
Line: 408
Char: 1
Code: 0
URI: http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js

Original issue reported on code.google.com by [email protected] on 15 Aug 2012 at 3:57

CSS3 keyframes definitions cause browser to crash

What steps will reproduce the problem?
1. Add media query to stylesheet with @keyframes definitions
2. Run in IE7 or IE8

What is the expected output? What do you see instead?
Expected to ignore @keyframes definitions.
Instead, browser freezes and has to be restarted!

What version of the product are you using? On what operating system?
I think I'm using v0.9 on Windows 7.

Original issue reported on code.google.com by [email protected] on 30 Jul 2012 at 10:22

Script throws error in IE6 (IETester)

What steps will reproduce the problem?
1. Download and install IETester (v.0.5.2)
2. Open IETester and via an IE6 tab, view a local page that has a link to a 
local version of the script.
3. See the Internet Explorer Script error window:
"Line: 130
Char: 1
Code: 0
URL: [local directory]"

What is the expected output? What do you see instead?
After I continue, the page displays in IE6 as though the script isn't there. It 
works in IE7-8 though.


What version of the product are you using? On what operating system?
Latest/current version of script
Windows Vista/7 
IETester v.0.5.2 (IE6 tab)

Please provide any additional information below.


Original issue reported on code.google.com by [email protected] on 6 Nov 2013 at 4:46

Link tags with no rel attribute cause null pointer exception

What steps will reproduce the problem?
1. Load a page with empty link tags (ie: <link>)
2. Only tested on IE8

What is the expected output? What do you see instead?
Empty link tags should be ignored.  Empty link tags cause a null pointer 
exception

What version of the product are you using? On what operating system?
Current release (as of July 2011)

Please provide any additional information below.
Normally this wouldn't be a gating problem, but some webpages render HTML that 
is dynamic in nature and correcting the markup is not feasible.  IE: a webmail 
client that renders the HTML body of a mime message.

Original issue reported on code.google.com by [email protected] on 27 Jul 2011 at 3:04

Invalid procedure with large numbers of media queries

What steps will reproduce the problem?

1. Run the js with the attached CSS file. this produces an error on line 543 of 
the src, and stops parsing the CSS.

What version of the product are you using? On what operating system?

IE8, Windows (via parallels, Mac OSX Lion)





Original issue reported on code.google.com by [email protected] on 20 Jun 2012 at 5:29

Attachments:

no effect / doesn't work in IE8

What steps will reproduce the problem?
1. view website in IE8


What is the expected output? What do you see instead?
I expect the site to have a responsive layout, instead, it has the default 
layout (mobile first one column layout)

What version of the product are you using? On what operating system?
latest version

Please provide any additional information below.
website is http://dashmedia.wpconsult.net/
Any ideas why css3-mediaqueries doesn't seem to work?

Original issue reported on code.google.com by [email protected] on 31 Jul 2012 at 5:45

not work in ie8

What steps will reproduce the problem?
1. not work in ie8
2.
3.

What is the expected output? What do you see instead?
responsive webpage but show blank page and console says "Unable to get value of 
the property 'indexOf': object is null or undefined  css3-mediaqueries.js, line 
315 "

What version of the product are you using? On what operating system?
Lastest, Windows 7 ultimate

Please provide any additional information below.

Original issue reported on code.google.com by [email protected] on 27 Aug 2013 at 12:46

Horizontal Scroll

What steps will reproduce the problem?
1. Open a webpage on IE lt 9, like IE 8
2. Resize the browser to a lower size
3. An horizontal scroll appears, but the content doesnt overflow

What is the expected output? What do you see instead?
There shouldnt be a horizontal scroll. 


What version of the product are you using? On what operating system?


Please provide any additional information below.
If you open the same webpage in a smaller screen, and you refresh the webpage, 
everything goes right. But the problem is when you resize the window.

Original issue reported on code.google.com by [email protected] on 16 Feb 2013 at 6:59

Don't work for me in IE7/8

What steps will reproduce the problem?
1.Don't work in ie7/8 
2.
3.

What is the expected output? What do you see instead?
Don't load css on different resolution

What version of the product are you using? On what operating system?
Lastest, Windows 7 ultimate

Please provide any additional information below.
is html5 layout with modernizr ...


Original issue reported on code.google.com by [email protected] on 28 Aug 2011 at 4:00

Support for media attribute

Could we support the media attribute?


What steps will reproduce the problem?
1. Use a <link href='' media=''> type css include

What is the expected output? What do you see instead?

the media attribute should be used as the media query

Please provide any additional information below.


I am a JS dev - let me know where to look in the code or give me some context 
on this issue and i can help.

Original issue reported on code.google.com by [email protected] on 11 Apr 2012 at 7:10

mediaqueries doesn't recognise first few media queries IE8

What steps will reproduce the problem?
1. Go to http://www.ethosep.co.uk.gridhosted.co.uk/environment/ on IE8

What is the expected output? What do you see instead?

I expect to have the mobile menu button (three white lines image) to be 
display: none; The same goes for the 'ethos' logo in the lighter grey top div. 

Instead, both of these display.


What version of the product are you using? On what operating system?

IE8, Windows 7

Please provide any additional information below.

I have tried a variety of things to fix this problem but am coming up blank - 
help would be appriciated.

Original issue reported on code.google.com by [email protected] on 31 Mar 2014 at 2:56

Confused by @charset-Rules

What steps will reproduce the problem?
1. Start your css-file with a @charset-Rule (@charset "UTF-8";)
2. Use a @media-Rule below

The script should recognize and apply the @media-Rule, but it doesn't.

I'm using Firefox 3.0 on Ubuntu Linux.

When debugging it turns out that the REGEX for Blocks recognizes the @charset 
as a beginning of a block, which is never closed.

Original issue reported on code.google.com by besser.barrierefrei on 19 Aug 2010 at 11:22

IE 8 crashes when using @-moz-document url-prefix()

What steps will reproduce the problem?
1. Include Script
2. Use @-moz-document url-prefix()in CSS File
3. Error

What is the expected output? What do you see instead?
Expected Output: No crash and webpage loads properly.
Instead: Browser complitley freezes and the task must be killed via task 
manager.

What version of the product are you using? On what operating system?
Win XP Prof. SP3, IE8 (8.0.6001.17802)


Original issue reported on code.google.com by [email protected] on 31 Mar 2014 at 11:49

<link itemprop="availability"....>

<link itemprop="availability" href="http://schema.org/InStock" /> -- 
woocommerce, on page product give error.


temporarily be solved

if(a.getAttribute("rel")){if(a.getAttribute("rel").indexOf("style")>-1&&a.href&&
a.href.length!==0&&!a.disabled){r[r.length]=a}}}if(a.getAttribute("itemprop")){i
f(a.getAttribute("itemprop").indexOf("style")>-1&&a.href&&a.href.length!==0&&!a.
disabled){r[r.length]=a}}}

but as a right?

Original issue reported on code.google.com by [email protected] on 21 Nov 2014 at 3:45

Chrome scroll position jumps

What steps will reproduce the problem?
1. Drag the scroll bar in Chrome 24

What is the expected output? What do you see instead?
It just scrolls./Jumps back to top.

What version of the product are you using? On what operating system?
Chrome 24/Win 7

Original issue reported on code.google.com by [email protected] on 13 Feb 2013 at 3:31

Not working in IE7/8

What steps will reproduce the problem?
1. I have used this js and nothing is working as i expected.
2. No media query running on these browsers
3.

What is the expected output? What do you see instead?
No media query running.

What version of the product are you using? On what operating system?


Please provide any additional information below.


Original issue reported on code.google.com by [email protected] on 27 Feb 2013 at 7:01

Bad addEventListener implementation for resize

What steps will reproduce the problem?
1. Use Internet Explorer 6
2. Include css3-mediaqueries-js library on a page
3. Include other js frameworks on that page (i.e. Mootools, Ext)

What is the expected output? What do you see instead?
When other libraries are included, the window resize handler is not fired (like 
overwritten), so mediaqueries stop working on older browsers like IE6.

What version of the product are you using? On what operating system?
IE6, more specifically IETester with IE6 version enabled, on Windows 7 64-bit.

Please provide any additional information below.
To fix this you just need to change for a more cross-browser compatible version 
of adding event listeners. On line 947 replace this:

<code>
window.onresize = function () {
 var x = window.onresize || function () {}; // save original
 return function () {
  x();
  resizeHandler();
 };
}();
</code>

for this:

<code>
var addEvent = function(elem, type, eventHandle) {
 if (elem == null || elem == undefined) return;
 if ( elem.addEventListener ) {
  elem.addEventListener( type, eventHandle, false );
 } else if ( elem.attachEvent ) {
  elem.attachEvent( "on" + type, eventHandle );
 } else {
  elem["on"+type]=eventHandle;
 }
};
addEvent(window, 'resize', function(){
 resizeHandler();
});
</code>

Original issue reported on code.google.com by [email protected] on 14 Dec 2012 at 6:50

Seems to be looping through scripts in wrong order

What steps will reproduce the problem?
1. Place 2 css files in head
2. put css @media overrides in the second css
3. run in IE

What is the expected output? What do you see instead?
Expected that the override @media be applied
Actually applies css from first file, If I swap the script it works.

What version of the product are you using? On what operating system?


Please provide any additional information below.
I think by reversing the ajax array it may work.

Original issue reported on code.google.com by [email protected] on 3 Apr 2012 at 4:35

Use a closure, one global, callbacks

Since media queries are executed with a little bit of delay it would be useful 
if there was a way to run code after the update.

The easiest way would be adding a global so a timeout can be added to the 
resize event:

if (window.css3mq && css3mq.enabled) {
  setTimeout(function() { /* do stuff */ }, 1000);
}

Right now the only globals are things that probably shouldn't be global. It 
would be nice if everything was wrapped in a closure and only 1 global was 
exposed, providing a reliable check to see if the script is enabled. Maybe also 
avoid pushing a custom Object.create in there.

Better and more elegant would be a true callback system:

var callback = function() { /* do stuff */ };
css3mq.addCallback(callback);
css3mq.removeCallback(callback);

Having either one of those would make life easier.

Original issue reported on code.google.com by [email protected] on 23 Jul 2012 at 12:34

Not work on IE8

What steps will reproduce the problem?
1. Not work on IE8
2.
3.

What is the expected output? What do you see instead?
I set two viewport, 1366 and 1024. But there only 1366 on ie 8.

What version of the product are you using? On what operating system?
IE 8. XP

Please provide any additional information below.


Original issue reported on code.google.com by [email protected] on 26 Nov 2013 at 3:43

IE link attribute

If a link tag don't have any relation attribute, this script breaks down 
everything. 

I tested with IE8 with a link tag inside the body which didn't have any 
relation attribute. This was needed for microdata meta information. A quick fix 
was adding a valid relation attribute to the link. It should be fixed in the 
script because this type of bugs are hard to find.


Original issue reported on code.google.com by [email protected] on 22 Sep 2013 at 8:57

IE8 doesn't recognize media queries in css when css is loaded from an https location

What steps will reproduce the problem?
1. Site works fine when CSS is loaded from http
2. Change CSS to load from HTTPS and the base styles load fine and other 
browsers work but IE8 doesn't recognize any of the responsive media queries in 
the css


What version of the product are you using? On what operating system?
Multiple OS have been tested, linking to current version of file

Is there any compatibility issues with this script not being able to get IE8 to 
recognize the @media styles in a secure style sheet? Seems like an odd behavior 
but we have double checked that the https css is the exact same as the http.

Original issue reported on code.google.com by [email protected] on 10 Apr 2013 at 4:47

This file is not working.

I have used CSS-mediaqueries.js on my file but there is not working properly in 
ie8.
It was working previously but it is not working since last week.
Please resolve this issue ASAP. Anyone can help me?


Original issue reported on code.google.com by [email protected] on 9 Jul 2013 at 10:40

Attachments:

media queries will be preferred over later defined global selectors

I found the bug when using and overriding padding in Bootstrap .jumbotron 
classes.

Description: To simplify the problem look at this example to provoke the 
respond.js bug:

    .shouldBeGreen {
      display: table-cell;
      background-color: gray;
      width: 100px;
      height: 100px;
      text-align: center;
      vertical-align: middle;
    }

    @media screen and (min-width: 50px) {
      .shouldBeGreen {
        background-color: red;
        font-weight: bold;
      }
    }


    /* Later in the CSS or in another LESS file... */


    /* Will be overridden by respond.js */
    .shouldBeGreen {
      background-color: green;
    }

Open my attached example page in Chrome/FF/Opera/Safari and IE8 (emulated or 
not) to compare the problem.


Behaviour: The script picks all relevant media query parts and puts them after 
the source CSS file which results in overriding all associated selectors 
defined after the media query.

Solution: I racked my brains about this, but don't have a solution at this 
point.

Here is my bug report to Respond.js which has exactly the same problem: 
https://github.com/scottjehl/Respond/issues/225

Original issue reported on code.google.com by [email protected] on 16 Sep 2013 at 1:58

Attachments:

Not working on IE7 or IE8

What steps will reproduce the problem?
1. Include the JS on the page
2. Navigate to page with JS on it
3. Error

What is the expected output? What do you see instead?
I expect it to not cause an error. Instead, I see the following: "Object 
doesn't support this property or method" which points to line 104: "var r=new 
XMLHttpRequest();"

What version of the product are you using? On what operating system?
IE8 - Windows XP

This seems to work on the IE 10 Dev tools when switiching to IE7 and IE8 
compatibility modes, but it causes an error on the real browsers.

Original issue reported on code.google.com by [email protected] on 22 Nov 2013 at 9:31

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.