Download & Extend
Zen » Issues

Zen can't see the boxsizing polyfill when using fixed-width.scss

Posted by thamas on June 14, 2012 at 6:18am
Project:Zen
Version:7.x-5.1
Component:CSS/SASS/HTML markup
Category:bug report
Priority:normal
Assigned:Unassigned
Status:active

Issue Summary

I installed the polyfill in my subtheme's root directory. Then set the path variable to
$box-sizing-polyfill-path: "/sites/all/themes/mythemename/boxsizing.htc";
in my fixed-width.scss (I'm building a fixed width theme now).
I commented out
//   $zen-box-sizing: content-box;

Then turned on
$legacy-support-for-ie7: true;
in _base.scss.

Then I got this warning when editing blocks.scss:

WARNING: IE legacy support is on, but $box-sizing is set to border-box and the $box-sizing-polyfill-path is empty.
         on line 172 of [deletedbyme]/sites/all/themes/mythemename/sass-extensions/zen-grids/stylesheets/zen/_grids.scss, in `zen-grid-item-base'
         from line 279 of [deletedbyme]/sites/all/themes/mythemename/sass-extensions/zen-grids/stylesheets/zen/_grids.scss
         from line 10 of [deletedbyme]/sites/all/themes/mythemename/sass/blocks.scss

In the Zen Grids help, I can read:

If the $box-sizing-polyfill-path variable is set, it will override these variables.
$legacy-support-for-ie7: false !default;

Does it mean I do not have to manually set legacy support to true? When I do not set it to true, there is no warning. If I have to set it to true manually, why do I see this warning?

Login or register to post comments

Comments

#1

Posted by JohnAlbin on August 3, 2012 at 9:07am
Version:7.x-5.1» 7.x-5.x-dev
Category:support request» bug report

Hmm… that might be a bug in Zen Grids.

#2

Posted by hedley on November 9, 2012 at 12:53pm

I've just enabled $legacy-support-for-ie7: true; and added the polyfill and it seems to be working fine for me.

#3

Posted by thamas on November 9, 2012 at 5:52pm

Hi Hedley,

Could you provide some more information about how you added the polyfill? Where is it located and how did you describe it's path?

Also did you change the box-sizing method?

#4

Posted by hedley on November 12, 2012 at 8:39pm

Here's what I've done:

$legacy-support-for-ie7: true;
$box-sizing-polyfill-path: "/sites/all/themes/THEMENAME/boxsizing.htc";

And I'm running Compass with SASS 3.2.1 and it's working for me with no problems

#5

Posted by JohnAlbin on November 20, 2012 at 5:52am

@ Hedley. Ok. But in which file did you set those variables?

#6

Posted by hedley on November 20, 2012 at 7:56am

I've set this in the base partial of my subtheme

#7

Posted by thamas on December 5, 2012 at 8:49pm

I've tested it again widh Zen 7.x-5.1 and I got the same warnings as the first time.

Then I hacked :( the _grids.scss file found in my theme's zen-grids folder and wrote the polyfill path directly into it. And the warnings have gone away.

Note: I set $legacy-support-for-ie7: true; in _base.scss. And I set box-sizing and polyfill path (first time) in fixed-width.scss.

After that I tested the behaviour with responsive-sidebars.scss and it seems there is no problem with that. So I'm not sure if it is a path problem or somthing else with the units used (percentage vs. pixel).

#8

Posted by gmclelland on December 21, 2012 at 8:29pm

Make sure you have the following:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url($box-sizing-polyfill-path);
}

After I added that code my layout snapped into place.

#9

Posted by gmclelland on December 21, 2012 at 8:43pm

Errr... Just read the following comment https://github.com/Schepp/box-sizing-polyfill/issues/22#issuecomment-973...

He discourages using the code I posted in the comment above.

#10

Posted by diwant on February 14, 2013 at 10:09pm

Comment #4 locks down the location of the theme. Is there a better way of getting rid of this warning?

#11

Posted by diwant on February 14, 2013 at 10:52pm

K, here's what I did. Based on the comment section starting at line 21 of layout/responsive-sidebars.scss (I'm using 7.x-5.1, it might be in the base scss file on newer versions based on comment #4 on this issue) I downloaded boxsizing.htc from Schepp's Github project to lib/boxsizing.htc within my theme folder. Then, in one of my own sass files I added

$box-sizing-polyfill-path: url(../lib/boxsizing.htc);

(my sass files are in the sass folder so I go one directory up before I am at the root of my theme).

Compile, and voila, no errors!

#12

Posted by thamas on February 15, 2013 at 12:10pm
Title:Zen can't see the boxsizing polyfill» Zen can't see the boxsizing polyfill when using fixed-width.scss
Version:7.x-5.x-dev» 7.x-5.1

Did you tried it with fixed width layout? Responsive layout works well for me too. It seems to be a fixed width issue.

#13

Posted by batdesign on March 14, 2013 at 9:02am

I tried adding the path in fixed-width.scss as the comments tell you to, but got errors, so plonked it in _base.scss instead, below the true statement. Worked fine then.
Downloaded to my themes js folder.
Here is my _base.scss:

$legacy-support-for-ie6: false;
$legacy-support-for-ie7: true;
$legacy-support-for-ie8: true;
$box-sizing-polyfill-path: "/sites/all/themes/themename/js/boxsizing.htc";