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?

Comments

JohnAlbin’s picture

Version:7.x-5.1» 7.x-5.x-dev
Category:support» bug

Hmm… that might be a bug in Zen Grids.

hedley’s picture

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

thamas’s picture

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?

hedley’s picture

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

JohnAlbin’s picture

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

hedley’s picture

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

thamas’s picture

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).

gmclelland’s picture

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.

gmclelland’s picture

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.

diwant’s picture

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

diwant’s picture

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!

thamas’s picture

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.

batdesign’s picture

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";
JohnAlbin’s picture

@diwant You can't specify a relative URL for the polyfil. Unfortunately, Microsoft's behavior property requires a relative path to the current page. That's crazy stupid since relative paths in CSS are supposed to be relative to the CSS file. That's why the docs on Schepps' github project say to use a full, absolute path to the root of the webserver.

JohnAlbin’s picture

Version:7.x-5.1» 7.x-5.x-dev
Status:Active» Postponed (maintainer needs more info)

Zen 7.x-5.2 will include Zen Grids 1.4. Maybe that will fix this issue?

KrisBulman’s picture

Status:Postponed (maintainer needs more info)» Needs work

Considering the worldwide browser stats for IE6 & IE7 are so very low, if you're still supporting IE7 you're in a tough spot.

That said, the problem described here is a documentation problem in 7.x-5.1. The docs in fixed-width.scss should be moved to _base.scss. This was fixed in dev (and 7.x-5.2+).

The comments in _init.scss in dev currently state:

// - (Preferred) Install the box-sizing polyfill and set the variable below to
//   the absolute path URL to the boxsizing.htc file.
//   @see https://github.com/Schepp/box-sizing-polyfill
//   $box-sizing-polyfill-path: "/path/to/boxsizing.htc";
KrisBulman’s picture

Version:7.x-5.x-dev» 7.x-5.1
KrisBulman’s picture

Status:Needs work» Fixed

oops, i meant to close this as fixed.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.