New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 92 users

Issue metadata

Status: Fixed
Owner:
Closed: Jan 2014
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug



Sign in to add a comment
link

Issue 124331: font-size with vw doesn't change when the browser window resizes

Reported by chriscoy...@gmail.com, Apr 19 2012

Issue description

Chrome Version       : 20.0.1107.0
OS Version: OS X 10.7.3
URLs (if applicable) :
Other browsers tested: No other browsers supporting vw that I know of

What steps will reproduce the problem?
1. h1 { width: 8vw; }
2. resize browser window
3. font size doesn't change along with new viewport width, you have to refresh page.

What is the expected result?
The font should resize according to new viewport width

What happens instead?
The font doesn't resize

Please provide any additional information below. Attach a screenshot if
possible.

Here's a JSFiddle: http://jsfiddle.net/chriscoyier/sxcfG/3/

That WORKS, because of the jQuery that re-applies CSS and thus redraws, but without the JS it doesn't work.
 

Comment 1 by paulir...@chromium.org, Apr 20 2012

Labels: -Area-Undefined Area-WebKit WebKit-CSS

Comment 2 by jonat...@xgecko.com, Jan 15 2013

This is also happening when using vh units to size an elements height. if the element is a direct descendent of the body tag chrome seems to resize the element as the window is resized, however if the element is deeper in the dom it is not resizing it. This seems to happen regardless of position, box-model, or overflow.

Comment 3 by jonat...@xgecko.com, Jan 19 2013

I've now discovered this is only a problem when resizing the window vertically only. Chrome appears to redraw the elements properly when the window is resized horizontally but not vertically. Resizing vertically, then resizing horizontally corrects the issue.

Comment 4 by jonat...@xgecko.com, Jan 19 2013

Chrome 24.0.1312.52
OS X 10.7.5

Comment 5 by fris...@jeka.info, Mar 10 2013

Comment 6 by bugdroid1@chromium.org, Mar 10 2013

Project Member
Labels: -Area-WebKit -WebKit-CSS Cr-Content Cr-Content-CSS

Comment 7 by mikelawther@chromium.org, Mar 10 2013

Owner: timloh@chromium.org
Hi Tim - can you take a look at this one?

Comment 8 by bugdroid1@chromium.org, Apr 6 2013

Project Member
Labels: -Cr-Content Cr-Blink

Comment 9 by bugdroid1@chromium.org, Apr 6 2013

Project Member
Labels: -Cr-Content-CSS Cr-Blink-CSS

Comment 10 by laukst...@gmail.com, Apr 28 2013

Nice to see you working on Blink engine. This issue is related also to Windows. Note, Chris testing case http://jsfiddle.net/chriscoyier/sxcfG/3/ applies JavaScript DOM change.

Comment 11 by Deleted ...@, Sep 11 2013

Any update on this? I'm still encountering the same problem almost six months later :\

Comment 12 by mgreenfi...@nwe.com, Oct 4 2013

Major flaw, major hindrance to script-free responsive coding.   Would like to see this fixed ASAP.

Comment 13 by br...@nutrislice.com, Oct 4 2013

We would seriously benefit from having this issue fixed. Fingers crossed it gets fixed soon!

Comment 14 by rudolph....@gmail.com, Oct 6 2013

Please, oh, please, fix this issue.. another (simpler?) example: http://jsfiddle.net/N9jPu/3/

Comment 15 by laukst...@gmail.com, Oct 6 2013

You can vote to increase this issue priority.

Comment 16 by rudolph....@gmail.com, Oct 6 2013

already done, 50th vote, let's hope this raises someone's eyebrow ..

Comment 17 by ckocagil@chromium.org, Oct 7 2013

Cc: eseidel@chromium.org ojan@chromium.org
Labels: -OS-Mac OS-All
Status: Assigned
CCing Blink folks who commented on the WebKit bug. Could you re-triage and re-assign if you see it necessary?

Comment 18 by tomtur...@gmail.com, Oct 17 2013

Please fix asap - responsive font-size would be incredibly useful for maintaining a 'comfortable measure' in paragraphs.

Comment 19 by webkompl...@gmail.com, Oct 18 2013

Voted to get this fixed. Thanks for fixing soon.

Comment 20 by biggs.ja...@gmail.com, Oct 21 2013

Any status update on this? Is anyone currently working on this, or is it in limbo?

Comment 21 by paulir...@chromium.org, Oct 21 2013

Cc: mikelawther@chromium.org
@tim,

Can you give an update on this ticket? Amongst Blink-CSS tickets, this is the 2nd most starred.

Comment 22 by timloh@chromium.org, Oct 21 2013

Cc: esprehn@chromium.org
I had a patch for this a while back (https://codereview.chromium.org/13771002/) but we figured we wouldn't want resizes (in particular orientation changes on mobile) to become more expensive when one adds a viewport unit. I'll see if we can come up with anything better or will just want to go with forcing style recalcs.

Comment 23 by thebooko...@gmail.com, Oct 21 2013

I'd love to see this pushed through. It's a powerful tool that could help on SOOOO many fronts.

Comment 24 by imoverc...@gmail.com, Nov 6 2013

@tim

If a developer don't want his text to resize on orientation change he will use vm's instead of vw's or vh's.

Don't really know if there's a smarter way than forcing style recalcs, but it would really work for me!^^

Comment 25 by blordstu...@gmail.com, Nov 6 2013

@Tim et al

The whole point of an author using CSS viewport units is presumably to force recalc on resize. I don't see how there's any splitting the difference here, because the author is yoking a size to the viewport and expecting it to change with the viewport. If the main implementation holdup is a concern about a performance hit on mobile due to author misuse, I think the solution is just to evangelize stripped-down mobile stylesheets with no viewport units, and to explain to folks that this is for titling and display text only, and even then only on capable tablets and desktop machines. And never, ever, EVER for body text, contrary to some of the (I would argue misguided) ideas floating around about ultra-responsive web typography.

In fact, this sounds like a great future blog post for a Developer Advocate :) --showing the real-world repaint costs on a commonplace phone for a long article whose paragraphs and graphics are sized with viewport units. Let the people sort it out. Let's see the rendering numbers on actual devices. It's not going to break anyone's site. There are lots of css patterns that perform pretty horribly on mobile (big box-shadows, for example), but in fairness that is not a reason to not implement the spec.

Thx for your work on this.

Comment 26 by uncle...@gmail.com, Nov 18 2013

I'd also love to see a fix for this soon. It somewhat defeats the purpose of responsive design if the browser doesn't respond to dimension changes on the fly.

Comment 27 by vli@chromium.org, Nov 19 2013

Labels: Hotlist-DevRel

Comment 28 by timloh@chromium.org, Nov 19 2013

Status: Started

Comment 29 by timloh@chromium.org, Dec 4 2013

Cc: nyerramilli@chromium.org
 Issue 261300  has been merged into this issue.

Comment 30 by Deleted ...@, Dec 9 2013

Obviously it would be best to have this fix just be fixed, but...

A temporary, non-polyfill solution is...

var altcrement = -1;
$(window).resize(function(){
    var currentFontSize = parseFloat($('html').css('font-size'));
    $('html').css('font-size', currentFontSize + (altcrement *= -1) + 'px');
});

The above, or similar, will force recalc on viewport units...

Comment 31 by bugdroid1@chromium.org, Jan 3 2014

Project Member
The following revision refers to this bug:
    http://src.chromium.org/viewvc/blink?view=rev&rev=164448

------------------------------------------------------------------------
r164448 | timloh@chromium.org | 2014-01-03T08:28:33.534806Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/css3/viewport-percentage-lengths/css3-viewport-percentage-lengths-getStyle.html?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RootInlineBox.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/masking/parsing-clip-path-shape-expected.txt?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSPrimitiveValue.h?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/StyleResolverState.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/virtual/legacy-animations-engine/animations/interpolation/line-height-interpolation-expected.txt?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderMenuList.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/animation/AnimatableLengthTest.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/StyleResolver.h?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyle.h?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/Length.h?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderView.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/computed-offset-with-zoom-expected.txt?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSCalculationValueTest.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/win/virtual/legacy-animations-engine/animations/interpolation/line-height-interpolation-expected.txt?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/html/HTMLMetaElement-in.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/linux/virtual/legacy-animations-engine/animations/interpolation/line-height-interpolation-expected.txt?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/masking/parsing-clip-path-shape.html?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderGrid.cpp?r1=164448&r2=164447&pathrev=164448
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/css3/viewport-percentage-lengths/viewport-percentage-lengths-page-zoom-expected.txt?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderTable.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSPrimitiveValue.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/FontBuilder.h?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSLengthFunctions.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/web/PageScaleConstraintsSet.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/computed-offset-with-zoom.html?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/svg/RenderSVGRoot.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/frame/FrameView.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/MediaQueryEvaluator.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderBR.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSToLengthConversionData.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderScrollbarPart.cpp?r1=164448&r2=164447&pathrev=164448
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/css3/viewport-percentage-lengths/viewport-percentage-lengths-page-zoom.html?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/shapes/parsing/parsing-shape-lengths-expected.txt?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSGradientValue.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderView.h?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderReplaced.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/MatchedPropertiesCache.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/FontBuilder.cpp?r1=164448&r2=164447&pathrev=164448
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/css3/viewport-percentage-lengths/viewport-percentage-lengths-resize-expected.txt?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSComputedStyleDeclaration.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderBoxModelObject.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/dom/TreeScope.h?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/animations/interpolation/line-height-interpolation-expected.txt?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/web/WebViewImpl.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/shapes/parsing/parsing-shape-lengths.html?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSLengthFunctions.h?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderFlexibleBox.h?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/svg/SVGSVGElement.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSToLengthConversionData.h?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderThemeChromiumMac.mm?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/StyleBuilderCustom.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderInline.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSCalculationValue.cpp?r1=164448&r2=164447&pathrev=164448
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/css3/viewport-percentage-lengths/viewport-percentage-lengths-resize.html?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/dom/Document.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/StyleBuilderConverter.h?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/dom/ViewportDescription.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/MatchedPropertiesCache.h?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderBox.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSMatrix.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/LengthFunctions.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderText.h?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderBlock.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/dom/TreeScope.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderTableCell.h?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSPrimitiveValueMappings.h?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/html/HTMLAreaElement.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/ViewportStyleResolver.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/StyleResolver.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyle.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/css3/viewport-percentage-lengths/css3-viewport-percentage-lengths-getStyle-expected.txt?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderFlexibleBox.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderObject.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderTableSection.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/animation/css/CSSAnimatableValueFactory.cpp?r1=164448&r2=164447&pathrev=164448
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/dom/Document.h?r1=164448&r2=164447&pathrev=164448

Move viewport unit resolution to style recalc time

This patch moves the resolution of viewport units to style recalc time.
Currently viewport units are left unresolved during style recalcs which
leads to several problems (see linked bugs). Moving the resolution will
fix these problems, as well as reduce the plumbing that goes on. 

This patch is touches a lot of files since the valueForLength functions
now no longer need a RenderView, but the interesting changes are in:

- CSSToLengthConversionData -> CSSPrimitiveValue, for moving resolution
to style recalc time
- Length / LengthFunction, no longer needs to know about viewport units
- FrameView -> Document -> MatchedPropertiesCache, for scheduling style
recalcs upon resize

Viewport Lengths are currently also used in viewport descriptions (that
is, @viewport and the viewport meta tag). I've added to Length two more
enum values (DeviceWidth and DeviceHeight), alongside ExtendToZoom.

Note that getComputedStyle will now do the right thing and return pixel
values when viewport units are used. This behaviour matches Firefox and
the css3-cascade spec.

I've added a test for the most starred bug (124331) and for the various
other issues fixed by this patch I'll make test-only patches.

Note that calc integration with viewport units will be fixed separately
to simplify reviews.

TBR=dglazkov@chromium.org
BUG= 124331 , 137617 , 125709 , 261298 , 173407 , 322365 , 310874 , 311465 

Review URL: https://codereview.chromium.org/82083002
------------------------------------------------------------------------

Comment 33 by timloh@chromium.org, Jan 6 2014

Status: Fixed

Comment 34 by laukst...@gmail.com, Jan 6 2014

@timloh, test case http://jsfiddle.net/N9jPu/3/show/ still repreduces flicker on small font-size. Try to resize screen check from 270px to smaller - "properlly" and "WHY?" will jump from one line to another.
I think it needs still some optimization if possible, it seems as a sub-pixel issue. The document width continues to scale from  284px - 264px while font-size hangs on the same size and is dropped on new line.

Comment 35 by laukst...@gmail.com, Jan 6 2014

Another flicker example http://jsfiddle.net/laukstein/QWC5k/7/show/
Take a look to review the issue.

Comment 36 by timloh@chromium.org, Jan 7 2014

laukstein: Please file a separate bug for the problem.

Comment 38 by matthew....@gmail.com, Jan 29 2014

Any idea when this patch will make it to the stable channel? Issue still exists in 32.0.1700.102 m: https://dl.dropboxusercontent.com/u/15603446/Box.html

Comment 39 Deleted

Comment 40 by eseidel@chromium.org, Feb 13 2014

Chrome version 32 is the current stable:
http://www.chromium.org/developers/calendar
Sounds like your Chromium is quite old.  I recommend upgrading or using an official Chrome build which will automatically keep itself up to date.

Based on when this was landed, I would expect this fix to be in milestone 34.  It's possible it made it into milestone 33, but I doubt it.

Comment 41 by webmas...@dleon.me, Feb 14 2014

In "Chrome Canary" is already fixed!
https://www.google.com/intl/en/chrome/browser/canary.html

Sign in to add a comment