New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

viewport units test #572

Closed
paulirish opened this Issue Apr 30, 2012 · 12 comments

Comments

Projects
None yet
7 participants
@paulirish
Member

paulirish commented Apr 30, 2012

via @chriscoyier

basicallly 100vw == window.width

test to be written for real.

@chriscoyier

This comment has been minimized.

Show comment
Hide comment
@chriscoyier

chriscoyier Apr 30, 2012

Contributor

Yay. There is a real use-case I think especially now that it's shipping in Chrome 20 & IE 10.

If support, use.
If no support, polyfill with FitText.js

Contributor

chriscoyier commented Apr 30, 2012

Yay. There is a real use-case I think especially now that it's shipping in Chrome 20 & IE 10.

If support, use.
If no support, polyfill with FitText.js

@ryanseddon

This comment has been minimized.

Show comment
Hide comment
@ryanseddon

ryanseddon May 1, 2012

Member

IE9 and maybe 10 interpret 1vw as the full width and not 1/100th of the width.

http://jsfiddle.net/ryanseddon/x4jA9/

Member

ryanseddon commented May 1, 2012

IE9 and maybe 10 interpret 1vw as the full width and not 1/100th of the width.

http://jsfiddle.net/ryanseddon/x4jA9/

@chriscoyier

This comment has been minimized.

Show comment
Hide comment
@chriscoyier

chriscoyier May 1, 2012

Contributor

It was fixed in 10, in my testing. This is kind of a disaster though. Maybe Modernizr should just report no support for IE 9? Or would you do tweener/broken support like .viewportunits-100x

Contributor

chriscoyier commented May 1, 2012

It was fixed in 10, in my testing. This is kind of a disaster though. Maybe Modernizr should just report no support for IE 9? Or would you do tweener/broken support like .viewportunits-100x

@tnorthcutt

This comment has been minimized.

Show comment
Hide comment
@tnorthcutt

tnorthcutt May 1, 2012

+1 for reporting no support in IE 9, at least initially.

tnorthcutt commented May 1, 2012

+1 for reporting no support in IE 9, at least initially.

@ryanseddon

This comment has been minimized.

Show comment
Hide comment
@ryanseddon

ryanseddon May 2, 2012

Member

@chriscoyier yeah I reckon just say no support for IE9 since it's a broken implementation anyway. Your proposed test will fail in IE9 so that should be fine.

I modified my testcase based of your idea to test for 50vw width as it would false positive in Firefox doing 100vw as the div it injected would naturally be the full window width too.

http://jsfiddle.net/ryanseddon/x4jA9/12/

This is false in IE9 and true in Chrome 20 and IE10

Member

ryanseddon commented May 2, 2012

@chriscoyier yeah I reckon just say no support for IE9 since it's a broken implementation anyway. Your proposed test will fail in IE9 so that should be fine.

I modified my testcase based of your idea to test for 50vw width as it would false positive in Firefox doing 100vw as the div it injected would naturally be the full window width too.

http://jsfiddle.net/ryanseddon/x4jA9/12/

This is false in IE9 and true in Chrome 20 and IE10

@FWeinb

This comment has been minimized.

Show comment
Hide comment
@FWeinb

FWeinb May 3, 2012

@ryanseddon if window.innerWidth is odd it won't work because getComputedStyle(elem, null)['width'] is rounded down.

This might be better: http://jsfiddle.net/FWeinb/etnYC/

(Tested in Chrome 20)

FWeinb commented May 3, 2012

@ryanseddon if window.innerWidth is odd it won't work because getComputedStyle(elem, null)['width'] is rounded down.

This might be better: http://jsfiddle.net/FWeinb/etnYC/

(Tested in Chrome 20)

@ryanseddon

This comment has been minimized.

Show comment
Hide comment
@ryanseddon

ryanseddon May 4, 2012

Member

@FWeinb is anything changed I don't see any difference in the link?

Member

ryanseddon commented May 4, 2012

@FWeinb is anything changed I don't see any difference in the link?

@FWeinb

This comment has been minimized.

Show comment
Hide comment
@FWeinb

FWeinb May 4, 2012

@ryanseddon Sorry I didn't saved it. I wrapped the window.innerWidth/2 with parseInt() to equally round it down.

FWeinb commented May 4, 2012

@ryanseddon Sorry I didn't saved it. I wrapped the window.innerWidth/2 with parseInt() to equally round it down.

@ryanseddon

This comment has been minimized.

Show comment
Hide comment
@ryanseddon

ryanseddon May 6, 2012

Member

Ok awesome, does someone want to put a pull request together?

Member

ryanseddon commented May 6, 2012

Ok awesome, does someone want to put a pull request together?

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Jul 19, 2012

Member

@sguolin want to take a shot at the PR for this?

Member

paulirish commented Jul 19, 2012

@sguolin want to take a shot at the PR for this?

@glsee

This comment has been minimized.

Show comment
Hide comment
@glsee

glsee Jul 21, 2012

Contributor

Yeah, sure! Kindly review: #638
P/S: changed my username from @sguolin recently.

Contributor

glsee commented Jul 21, 2012

Yeah, sure! Kindly review: #638
P/S: changed my username from @sguolin recently.

KuraFire added a commit that referenced this issue Aug 11, 2012

Merge pull request #638 from glsee/relative-units
CSS Relative Units (vw, vh, vmin, vmax) - Re: Issue #572
@sindresorhus

This comment has been minimized.

Show comment
Hide comment
@sindresorhus

sindresorhus Jan 24, 2013

Member

Fixed in #638

Member

sindresorhus commented Jan 24, 2013

Fixed in #638

patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this issue Feb 22, 2015

Merge pull request #638 from glsee/relative-units
CSS Relative Units (vw, vh, vmin, vmax) - Re: Issue #572
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment