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

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

Reported by chriscoy...@gmail.com, Apr 19 2012 Back to list

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.

 
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

This is a WebKit bug
https://bugs.webkit.org/show_bug.cgi?id=87846
Project Member

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

Labels: -Area-WebKit -WebKit-CSS Cr-Content Cr-Content-CSS
Owner: timloh@chromium.org
Hi Tim - can you take a look at this one?
Project Member

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

Labels: -Cr-Content Cr-Blink
Project Member

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

Labels: -Cr-Content-CSS Cr-Blink-CSS
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 :\
Major flaw, major hindrance to script-free responsive coding.   Would like to see this fixed ASAP.
We would seriously benefit from having this issue fixed. Fingers crossed it gets fixed soon!
Please, oh, please, fix this issue.. another (simpler?) example: http://jsfiddle.net/N9jPu/3/


You can vote to increase this issue priority.
already done, 50th vote, let's hope this raises someone's eyebrow ..
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?
Please fix asap - responsive font-size would be incredibly useful for maintaining a 'comfortable measure' in paragraphs.
Voted to get this fixed. Thanks for fixing soon.
Any status update on this? Is anyone currently working on this, or is it in limbo?
Cc: mikelawther@chromium.org
@tim,

Can you give an update on this ticket? Amongst Blink-CSS tickets, this is the 2nd most starred.
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.
I'd love to see this pushed through. It's a powerful tool that could help on SOOOO many fronts.
@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!^^
@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
Status: Started
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...
Project Member

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

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
------------------------------------------------------------------------
Status: Fixed
@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.
Another flicker example http://jsfiddle.net/laukstein/QWC5k/7/show/
Take a look to review the issue.
laukstein: Please file a separate bug for the problem.
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

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