search

FremyCompany / css-grid-polyfill

A working implementation of css grids for current browsers.
MIT License
1.11k stars 82 forks source link

Media Queries Ignored #40

Open aronduby opened 8 years ago

aronduby commented 8 years ago

I've got my styles setup so the grid styles for the parent and all of the children only apply at a specific width, before that everything should just be display block. It works fine with the chrome flag turned on and bypassing the polyfill, but whenever the polyfill is enabled on mobile it tries to apply the desktop styles.

FremyCompany commented 8 years ago

Please provide a test case I can look into.

FremyCompany commented 8 years ago

And which browsers/OS you tried this in

aronduby commented 8 years ago

I'll work on getting a test case together later tonight. Unfortunately I ended up switching to using flexbox because the site was already pretty heavy. I'm guessing there's something crazy I'm doing in the contents that is causing it.

Browsers were latest chrome on windows 10, chrome on android, chrome and safari on iphone 6 and 6s both IRL physical device and browserstack.

FremyCompany commented 8 years ago

I am asking because the feature is manually tested and so I know for sure it used to work: https://github.com/FremyCompany/css-grid-polyfill/blob/master/demo/css-grid/layout3.html

satyanath commented 7 years ago

I too faced exactly the same issue. However my code is too complex as it is a polymer component. Polymer adds lot of its own vagaries. So I am not sure whether the problem is due to the usage in Polymer or in the polyfill. My problem was in Edge browser. I did try with a simple program and it worked well in Edge also. Unfortunately I cant simulate the problem in a simple case and hence unable to share the code. Will keep trying and if I am successful in creating a simple script to test will share that.

satyanath commented 7 years ago

While investigating this problem I found another issue. On investigation I found that I was getting parsing error and I found that the polyfill somehow cant handle the following CSS declaration

--background-pattern: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxmaWx0ZXIgaWQ9Im4iPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjciIG51bU9jdGF2ZXM9IjEwIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIj48L2ZlVHVyYnVsZW5jZT4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMDAwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuNCI+PC9yZWN0Pgo8L3N2Zz4=");

Once I removed that it start showing the desktop style - even when I reduced the browser size it still kept showing the desktop styles. Even when I reload the site with a small window (equivalent to a mobile window media query rule) the style shown were the desktop styles. I still do not have clue on this. But hopefully you can fix the other issue.