etodanik
Inconsistent behavior with media queries
Loving the new media query support. I've been playing around a little and I've noticed some strange behavior.
Here's a fiddle with some test cases: http://jsfiddle.net/chad/Cr486/
There's a bunch of buttons that do individual tests, and then there's some sequential tests that automate stepping through a specific sequence of injections. The tests are a mix of standard injections and media query injections all applied to one element.
- Test 0 is OK.
- Test 1 works the first time through. The second time through, the mq injection doesn't seem to take. Then it alternates like this back and forth each time you run through the sequence.
- Test 2 is OK, but behaves in a way that the non-mq injection overrides the mq injection. This matches what would happen if you wrote a stylesheet with a non-mq rule coming after an mq rule. No one writes stylesheets like that though. I'm curious if mq rules should be segmented so that they are always applied after the non-mq rules.
- Test 3 works the first time through. Every time after that, the mq injection doesn't take.
- Test 4 doesn't work. The mq injection works, but then is not cleared correctly. I'm targeting an array of a standard selector and mq selector. This might not be appropriate syntax, but it seems like it should be valid, given that you're already accepting media queries as arrays with one object in them.
- Test 5 works the first time through, but then alternates working and not working each subsequent time through. This is using the array syntax I mentioned in Test 4, but with the media query coming first.
- Test 6 is similar to Test 5. It also works the first time through, but after that, it takes two clears for the rule to be removed.
I got the same results with all of these in both Chrome 32 and Safari 7.0.1. I hope this isn't too overwhelming. Please feel free to ask for further clarification on anything, I spent too much time making the tests and I'm rushing my explanations. Probably should have done it the other way around :)
You should be able to add your own tests and test sequences quite easily because of how I've built the fiddle.
This is great. I'm going to take a look soon, and hopefully fix all the inconsistent behaviour. Also, I'd be interested to hear your use cases of veinjs. Feel free to drop me a line at: [email protected]
