Zen can't see the boxsizing polyfill when using fixed-width.scss [#1633516]

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

Comment #1

JohnAlbin

he/they/他

English

Taipei, Taiwan

CreditAttribution: JohnAlbin commented 3 August 2012 at 09:07

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

Hmm… that might be a bug in Zen Grids.

Comment #2

hedley CreditAttribution: hedley commented 9 November 2012 at 12:53

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

Comment #3

thamas

Hungarian

Hungary

CreditAttribution: thamas commented 9 November 2012 at 17:52

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?

Comment #4

hedley CreditAttribution: hedley commented 12 November 2012 at 20:39

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

Comment #5

JohnAlbin

he/they/他

English

Taipei, Taiwan

CreditAttribution: JohnAlbin commented 20 November 2012 at 05:52

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

Comment #6

hedley CreditAttribution: hedley commented 20 November 2012 at 07:56

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

Comment #7

thamas

Hungarian

Hungary

CreditAttribution: thamas commented 5 December 2012 at 20:49

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

Comment #8

gmclelland CreditAttribution: gmclelland commented 21 December 2012 at 20:29

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.

Comment #9

gmclelland CreditAttribution: gmclelland commented 21 December 2012 at 20:43

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.

Comment #10

diwant CreditAttribution: diwant commented 14 February 2013 at 22:09

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

Comment #11

diwant CreditAttribution: diwant commented 14 February 2013 at 22:52

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!

Comment #12

thamas

Hungarian

Hungary

CreditAttribution: thamas commented 15 February 2013 at 12:10

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.

Comment #13

batdesign CreditAttribution: batdesign commented 14 March 2013 at 09:02

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";

Comment #14

JohnAlbin

he/they/他

English

Taipei, Taiwan

CreditAttribution: JohnAlbin commented 30 July 2013 at 10:38

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

Comment #15

JohnAlbin

he/they/他

English

Taipei, Taiwan

CreditAttribution: JohnAlbin commented 30 July 2013 at 10:42

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?

Comment #16

KrisBulman CreditAttribution: KrisBulman commented 1 August 2013 at 00:03

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";