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

Issue 599225 link

Starred by 5 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows , Chrome
Pri: 2
Type: Bug



Sign in to add a comment

Resize grabber is way too tiny

Project Member Reported by palmer@chromium.org, Mar 30 2016

Issue description

Chrome Version       : 50.0.2661.32
OS Version: 7978.18.0

UserAgentString: Mozilla/5.0 (X11; CrOS x86_64 7978.18.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.32 Safari/537.36

See screenshot. The grippie in the lower-right corner of textareas is so small as to be inaccessible and nearly unusable. I haven't had this problem until I got the Material Design update, so it might be related to MD but I'm not sure. It fits with the overall problem of tiny iconography and text in MD.
 
Screenshot 2016-03-30 at 13.10.39.png
940 bytes View Download

Comment 1 by palmer@chromium.org, Mar 30 2016

Cc: roma@chromium.org ainslie@chromium.org rolfe@chromium.org
Better screenshot: Scrollbar for scale. +UX friends
Screenshot 2016-03-30 at 13.33.12.png
885 bytes View Download
Cc: sgabr...@chromium.org
sgabriel@ will probably be the one to route this. 
Cc: tdander...@chromium.org
Labels: -Proj-MaterialDesign-CrOS
Status: Untriaged (was: Available)
Summary: textarea grabber is way too tiny (was: textarea grabber is way too tiny (Material Design only?))
I'm assuming this is a textarea inside arbitrary webpages, in which case it's unrelated to MD changes in native UI. I'd also be surprised if this were actually ChromeOS-specific.
Labels: -Proj-MaterialDesign-CrOS
Cc: tdander...@chromium.org
Components: -UI Blink>Forms>Textarea UI>Accessibility
Status: Untriaged (was: Available)
Summary: textarea grabber is way too tiny (was: textarea grabber is way too tiny (Material Design only?))
(not sure why the labels were not applying)

Comment 6 by tkent@chromium.org, Mar 30 2016

Components: -Blink>UI Blink>Paint
Labels: Needs-Bisect
Status: Available (was: Untriaged)

Comment 8 by tkent@chromium.org, Apr 1 2016

Is this reproducible with non-textarea like the following?
    data:text/html;charset=utf-8,<div style="resize:both; overflow:scroll; width:200px; height:200px;">aaa</div>

Components: -IO>Accessibility

Comment 10 by tkent@chromium.org, Apr 25 2016

Components: -Blink>Forms>Textarea
Summary: Resize grabber is way too tiny (was: textarea grabber is way too tiny)
Confirmed #8 reproduced the issue.

I can't repro on Mac (high dpi) nor linux, so this appears to be an issue with the theme settings on ChromeOS. I have no idea where that code even lives, but I'll look.
I've tested this with the following html file:

<!DOCTYPE html>
<div style="resize:both; overflow:scroll; width:200px; height:200px;">aaa</div>

I can't reproduce with that example on an Asus Chromebook with m49, 50 or 52. e.g. 50.0.2661.87, platform beta-channel veyron_minnie

Can someone please provide a standalone file that reproduces, and tell me what device it reproduces on? With that we might get some action on the bisect.

For reference, all the grabbers I see have the diagonal lines in the bottom right quarter of the corner square, and the entire corner square is active for events.
Cc: -roma@chromium.org tkent@chromium.org

Comment 14 by tkent@chromium.org, Apr 26 2016

I reproduced this with 51.0.2688.0 on Pixel, which has window.devicePixelRatio = 2.

I can't repro with the #8 test case in m50 (Beta channel) or m51 (Dev channel) on an old generation Pixel with devicePixelRatio = 2. I'm at a loss in understanding why not.

It's clear that the initial report is showing a grabber that is 1/2 expected size, almost certainly due to a failure to apply the device scale factor when painting it. I'd like to repro it first so I can test any changes I make.
Cannot reproduce on Acer C720P m50. I think this is a pixel ratio scaling problem. Also, the cursor when hovering over the corner or resizing is the default pointer instead of nwse-resize.

Comment 17 by tkent@chromium.org, Dec 15 2016

Cc: bsep@chromium.org osh...@chromium.org
 Issue 674664  has been merged into this issue.

Comment 18 by tkent@chromium.org, Dec 15 2016

Labels: OS-Windows
I reproduce this on an HP zbook running gwindows (available from techstop) which is at 2.5x by default
Labels: NewComponent-Accessibility NewComponent-Accessibility-Browser
Labels: -Needs-Bisect

Comment 22 by rolfe@chromium.org, Mar 30 2017

Cc: -rolfe@chromium.org
Removing myself. For desktop UI you may want to loop in bettes for visuals and hwi for interaction.
Labels: -newcomponent-accessibility-browser -newcomponent-accessibility
Owner: schenney@chromium.org
Status: Assigned (was: Available)
I'll look into reproducing on Windows with variable DPI.
Cc: -ainslie@chromium.org bettes@chromium.org hwi@chromium.org
The wonders of Windows 10 and the custom DPI setting on the display.

The problem is simple: We are applying floored integer scaling for the DPI resize. So the grabber is the same size at 100%, 125%, 150%, 175% and then jumps at 200% to be the same at 225%, 250% etc.

On some platforms the scale might be coming in at 1.999 or something, hence the difficulty of reproducing.
Labels: -M-50 M-60 BugSource-User PaintTeamTriaged-20170424
Cc: amitkuma...@mahindrasatyam.com malaykeshav@chromium.org
+malaykeshav@

This is handled in ScrollableAreaPainter::drawPlatformResizerImage

Looks like we're picking right asset, but not scaling the cornerResizerSize?
We may also want to downscale 2x assets for 175% instead of upscaling 1x.
Cc: -hwi@chromium.org fmalita@chromium.org
There is only one image, that is scaled up for higher DPI. So always scaling up by the DPI zoom amount would be fine.

The image is 2 "lines". Each line is actually 2 lines right by each other, one 60% opacity black and 1 60% opacity white,and the lines do not go right to the edge of the image area.

Does anyone have an opinion on drawing the lines explicitly, and doing away with the image resource?
sgtm
Status: Started (was: Assigned)
Project Member

Comment 32 by bugdroid1@chromium.org, Apr 28 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/d4c124aa6f93deabb5415b6463d8ac6c362e0eab

commit d4c124aa6f93deabb5415b6463d8ac6c362e0eab
Author: schenney <schenney@chromium.org>
Date: Fri Apr 28 14:35:07 2017

Draw the text area resizer with drawing commands

We were drawing the text area resizer using an image scaled
to either 100% or 200% depending on the device scale factor.
This leads to a resizer that is too small at 190% DPI, for example,
and seems to sometimes draw too small on standard 2x DPI devices.

This patch refactors the code to paint the resizer using lines,
rather than an image. This results in correct behavior for any scale.

R=fmalita@chromium.org, peter@chromium.org
BUG=599225
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2

Review-Url: https://codereview.chromium.org/2835203005
Cr-Commit-Position: refs/heads/master@{#467992}

[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/content/app/resources/README.txt
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/content/child/blink_platform_impl.cc
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/content/shell/BUILD.gn
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/content/shell/common/shell_content_client.cc
[delete] https://crrev.com/8b9e9fcb9eb5c2408d8488f2f619b51ff24d0470/content/shell/resources/textAreaResizeCorner.png
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/content/shell/shell_resources.grd
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/linux/fast/css/resize-corner-tracking-transformed-expected.png
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/linux/fast/css/resize-corner-tracking-transformed-iframe-expected.png
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/linux/fast/forms/textarea/textarea-appearance-basic-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/linux/scrollbars/resize-scales-with-dpi-150-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/linux/virtual/prefer_compositing_to_lcd_text/scrollbars/resize-scales-with-dpi-150-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/linux/virtual/prefer_compositing_to_lcd_text/scrollbars/resize-scales-with-dpi-150-expected.txt
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/linux/virtual/rootlayerscrolls/scrollbars/resize-scales-with-dpi-150-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/linux/virtual/rootlayerscrolls/scrollbars/resize-scales-with-dpi-150-expected.txt
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/linux/virtual/sharedarraybuffer/fast/css/resize-corner-tracking-transformed-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/linux/virtual/sharedarraybuffer/fast/css/resize-corner-tracking-transformed-iframe-expected.png
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-mac10.10/fast/forms/textarea/textarea-appearance-basic-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-mac10.10/virtual/prefer_compositing_to_lcd_text/scrollbars/resize-scales-with-dpi-150-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-mac10.10/virtual/prefer_compositing_to_lcd_text/scrollbars/resize-scales-with-dpi-150-expected.txt
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-mac10.10/virtual/rootlayerscrolls/scrollbars/resize-scales-with-dpi-150-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-mac10.10/virtual/rootlayerscrolls/scrollbars/resize-scales-with-dpi-150-expected.txt
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-mac10.11/fast/forms/textarea/textarea-appearance-basic-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-mac10.11/virtual/prefer_compositing_to_lcd_text/scrollbars/resize-scales-with-dpi-150-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-mac10.11/virtual/prefer_compositing_to_lcd_text/scrollbars/resize-scales-with-dpi-150-expected.txt
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-mac10.11/virtual/rootlayerscrolls/scrollbars/resize-scales-with-dpi-150-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-mac10.11/virtual/rootlayerscrolls/scrollbars/resize-scales-with-dpi-150-expected.txt
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-mac10.9/fast/forms/textarea/textarea-appearance-basic-expected.png
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-mac10.9/fast/hidpi/resize-corner-hidpi-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-mac10.9/scrollbars/resize-scales-with-dpi-150-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-mac10.9/virtual/prefer_compositing_to_lcd_text/scrollbars/resize-scales-with-dpi-150-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-mac10.9/virtual/prefer_compositing_to_lcd_text/scrollbars/resize-scales-with-dpi-150-expected.txt
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-mac10.9/virtual/rootlayerscrolls/scrollbars/resize-scales-with-dpi-150-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-mac10.9/virtual/rootlayerscrolls/scrollbars/resize-scales-with-dpi-150-expected.txt
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-retina/fast/forms/textarea/textarea-appearance-basic-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-retina/virtual/prefer_compositing_to_lcd_text/scrollbars/resize-scales-with-dpi-150-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-retina/virtual/prefer_compositing_to_lcd_text/scrollbars/resize-scales-with-dpi-150-expected.txt
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-retina/virtual/rootlayerscrolls/scrollbars/resize-scales-with-dpi-150-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac-retina/virtual/rootlayerscrolls/scrollbars/resize-scales-with-dpi-150-expected.txt
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac/fast/css/resize-corner-tracking-transformed-expected.png
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac/fast/css/resize-corner-tracking-transformed-iframe-expected.png
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac/fast/forms/textarea/textarea-appearance-basic-expected.png
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac/fast/hidpi/resize-corner-hidpi-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac/scrollbars/resize-scales-with-dpi-150-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac/virtual/prefer_compositing_to_lcd_text/scrollbars/resize-scales-with-dpi-150-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac/virtual/prefer_compositing_to_lcd_text/scrollbars/resize-scales-with-dpi-150-expected.txt
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac/virtual/rootlayerscrolls/scrollbars/resize-scales-with-dpi-150-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac/virtual/rootlayerscrolls/scrollbars/resize-scales-with-dpi-150-expected.txt
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac/virtual/sharedarraybuffer/fast/css/resize-corner-tracking-transformed-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/mac/virtual/sharedarraybuffer/fast/css/resize-corner-tracking-transformed-iframe-expected.png
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/win/fast/css/resize-corner-tracking-transformed-expected.png
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/win/fast/css/resize-corner-tracking-transformed-iframe-expected.png
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/win/fast/forms/textarea/textarea-appearance-basic-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/win/virtual/sharedarraybuffer/fast/css/resize-corner-tracking-transformed-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/win/virtual/sharedarraybuffer/fast/css/resize-corner-tracking-transformed-iframe-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/win7/virtual/sharedarraybuffer/fast/css/resize-corner-tracking-transformed-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/platform/win7/virtual/sharedarraybuffer/fast/css/resize-corner-tracking-transformed-iframe-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/scrollbars/resize-scales-with-dpi-150-expected.png
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/scrollbars/resize-scales-with-dpi-150-expected.txt
[add] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/LayoutTests/scrollbars/resize-scales-with-dpi-150.html
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/Source/core/paint/ScrollableAreaPainter.cpp
[modify] https://crrev.com/d4c124aa6f93deabb5415b6463d8ac6c362e0eab/third_party/WebKit/public/blink_image_resources.grd
[delete] https://crrev.com/8b9e9fcb9eb5c2408d8488f2f619b51ff24d0470/third_party/WebKit/public/default_100_percent/blink/textarea_resize_corner.png
[delete] https://crrev.com/8b9e9fcb9eb5c2408d8488f2f619b51ff24d0470/third_party/WebKit/public/default_200_percent/blink/textarea_resize_corner.png

Status: Fixed (was: Started)
Labels: Needs-Feedback
Tested the issue as per the html provided in Comment# 12.
Opened the html file in Latest Chrome# 60.0.3088.3 on Windows 10 and observed draggable area.
Attached a screenshot for reference. Could some one please look into it and let us know whether this is the required behavior.
Thanks in Advance.
599225.png
35.7 KB View Download
Labels: -Needs-Feedback
Status: Verified (was: Fixed)
That is the correct result. The resizer handle is in the lower right quadrant.
Status: Assigned (was: Verified)
I'm still experiencing this problem on Chrome 62.0.3202.28 (Official Build) dev (64-bit). Strange! Any clues? Are there configuration parameters I might have set that would affect this?
Screenshot 2017-09-27 at 1.09.34 PM.png
47.9 KB View Download
What platform, monitor DPI and zoom?
#37: Pixel 2; 1440x956 (but also occurs at all other resolutions); zoom 100%.
I think this has regressed since my change. On Windows we are clearly not scaling the text grabber with DPI changes. I'll bisect tomorrow and file a new bug if necessary.
I am experiencing it on 60.0.3112.114
It was WAI on M59
Cc: -tkent@chromium.org pkasting@chromium.org
Components: -UI>Accessibility -Blink>Paint UI>HighDPI
Owner: robliao@chromium.org
On Windows this regressed within the range https://chromium.googlesource.com/chromium/src/+log/41bf504929935a37fb782decd602d565c9409923..83cc54ce489016614d04f9148a884d20e3a67c0b

I strongly suspect this:
https://chromium.googlesource.com/chromium/src/+/23364eecc5d1bb1770f8c22a7c0a320154e3eac7 "Enable Per-Monitor DPI Unless Explicitly Disabled"

In the review of that patch, pkasting@ discusses --force-device-scale-factor and if you use --force-device-scale-factor it turns out we have been getting it wrong all along. So the bug is apparently in communicating the correct device scale factor to the correct code.

Also note that the bugs.chromium.org text box has the problem, but not a textbox created using the example in comment #c8. Looking at my change, the only way now we could be getting it wrong is if the resizer box size in the painting code is wrong.

It also seems very likely that other platforms broke at other times, because the patch in question changes win specific code (assuming that file is not included in other platforms).

Over to the patch author as the first step in figuring out what is going wrong. It's likely not painting at this point unless we are querying the wrong value for dpi settings somewhere up the stack.
Cc: robliao@chromium.org
Labels: -Pri-1 Pri-2
Owner: schenney@chromium.org
Are we sure about this? The reference change was made 1+ years ago and only affects Windows. The fix in #32 landed way after that.
I'm sure it's a live problem that makes Chrome OS hard to use. :)
The question above refers to the analysis, not to the bug.
ping? This makes chrome hard/annoying to use on windows for some tasks.
Labels: -M-60 M-67
Owner: malaykeshav@chromium.org
malaykeshav@ can you look into this?
 Issue 904046  has been merged into this issue.

Sign in to add a comment