New issue
Advanced search Search tips

Issue 660840 link

Starred by 5 users

Issue metadata

Status: Fixed
Owner:
Closed: Nov 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Compat



Sign in to add a comment

HTML validation message in wrong position

Reported by slamb...@gmail.com, Oct 31 2016

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36

Example URL:
https://www.slamb.eu/

Steps to reproduce the problem:
1. Visit https://www.slamb.eu/#kontakt.
2. Try to send empty form.

What is the expected behavior?
Message about empty input should be close to empty input.

What went wrong?
Message about empty input is lost somewhere on website.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 54.0.2840.71  Channel: stable
OS Version: 10.0
Flash Version:
 
validation.png
70.6 KB View Download
Labels: Needs-Feedback
NextAction: 2016-11-14
This dialog message is driven entirely by the webpage itself.

I cannot reproduce the problem on Ubuntu 14.04 with Chrome 54.0.2840.71.
Or Windows 10 Chrome 54.0.2840.71 (hdpi and low dpi modes)

Does the problem reproduce in Edge or FireFox?


Comment 2 by slamb...@gmail.com, Oct 31 2016

Edge and Firefox are ok for me.

Comment 3 by slamb...@gmail.com, Oct 31 2016

I found that this problem is related to scaling on high resolution displays, see attached screenshots. Number in filename defines percentage settings in Windows.
validation_edge_200.png
356 KB View Download
validation_firefox_200.png
385 KB View Download
validation_chrome_100.png
202 KB View Download
validation_chrome_150.png
281 KB View Download
validation_chrome_200.png
374 KB View Download

Comment 4 by slamb...@gmail.com, Oct 31 2016

Sorry, i put there wrong screen of Edge when it already lost focus, here is the right one (i cant edit the post).
validation_edge_200.png
362 KB View Download
Cc: bsep@chromium.org
Components: Blink>Forms
Yup can reproduce on Windows 10 (Comment #1; the dialog is actually provided by the required attribute).

bsep@ could this be any fallout from your changes? 

Comment 6 by bsep@chromium.org, Nov 1 2016

Status: Available (was: Unconfirmed)
Yes, I see the issue too. Let me take a look at it.

Comment 7 by bsep@chromium.org, Nov 1 2016

Cc: -bsep@chromium.org
Components: UI>HighDPI
Owner: bsep@chromium.org
Looks like a HiDPI bug. The little widget is having its x/y position scaled when it shouldn't, I think. I'll address it.

I bet this reproduces on other platforms too, if anyone can confirm.

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

Components: -Blink>Forms Blink>Forms>Validation
Labels: -Needs-Feedback
NextAction: ----
Status: Assigned (was: Available)
NextAction: 2016-11-14
Yes this is happening on cros too. Looks like the following code should be passing the one in screen coordinates (although it may have to be done differently so that it works in emulator)

https://cs.chromium.org/chromium/src/third_party/WebKit/Source/web/ValidationMessageClientImpl.cpp?rcl=1478128703&l=84
Project Member

Comment 10 by bugdroid1@chromium.org, Nov 19 2016

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

commit 5debc705a0b892bd2dcf82ec7672147268083957
Author: bsep <bsep@chromium.org>
Date: Sat Nov 19 00:27:46 2016

Fix form validation bubble positioning at hidpi.

Since use-zoom-for-dsf launched, when Blink converts to screen
coordinates it needs to take the device scale factor into account.
Normally it would do this by calling viewportToScreen or a similar
function. However, because the validation bubble anchor is in viewport
coordinates instead of screen coordinates, the positioning code needs to
use device scale factor explicitly.

The reason we can't just convert the anchor to screen coordinates in
Blink is because the same anchor is used for cocoa. It needs to y-flip
the anchor for OSX and converting to screen coordinates too early messes
up that calculation.

BUG= 660840 

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

[modify] https://crrev.com/5debc705a0b892bd2dcf82ec7672147268083957/chrome/browser/ui/views/validation_message_bubble_view.cc
[modify] https://crrev.com/5debc705a0b892bd2dcf82ec7672147268083957/chrome/browser/ui/views/validation_message_bubble_view.h

Comment 11 by bsep@chromium.org, Nov 19 2016

Status: Fixed (was: Assigned)

Comment 12 by tkent@chromium.org, Dec 19 2016

 Issue 675476  has been merged into this issue.

Comment 13 by tkent@chromium.org, Dec 20 2016

Labels: Merge-Request-56
NextAction: ----

Comment 14 by dimu@chromium.org, Dec 20 2016

Labels: -Merge-Request-56 Merge-Approved-56 Hotlist-Merge-Approved
Your change meets the bar and is auto-approved for M56 (branch: 2924)
Project Member

Comment 15 by bugdroid1@chromium.org, Dec 20 2016

Labels: -merge-approved-56 merge-merged-2924
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/1f010f3da574e93bfafb68a0149ae8d350202e71

commit 1f010f3da574e93bfafb68a0149ae8d350202e71
Author: Kent Tamura <tkent@chromium.org>
Date: Tue Dec 20 01:51:12 2016

Merge "Fix form validation bubble positioning at hidpi." to M56

Since use-zoom-for-dsf launched, when Blink converts to screen
coordinates it needs to take the device scale factor into account.
Normally it would do this by calling viewportToScreen or a similar
function. However, because the validation bubble anchor is in viewport
coordinates instead of screen coordinates, the positioning code needs to
use device scale factor explicitly.

The reason we can't just convert the anchor to screen coordinates in
Blink is because the same anchor is used for cocoa. It needs to y-flip
the anchor for OSX and converting to screen coordinates too early messes
up that calculation.

BUG= 660840 

Review-Url: https://codereview.chromium.org/2491113002
Cr-Commit-Position: refs/heads/master@{#433349}
(cherry picked from commit 5debc705a0b892bd2dcf82ec7672147268083957)

Review-Url: https://codereview.chromium.org/2585263005 .
Cr-Commit-Position: refs/branch-heads/2924@{#559}
Cr-Branched-From: 3a87aecc31cd1ffe751dd72c04e5a96a1fc8108a-refs/heads/master@{#433059}

[modify] https://crrev.com/1f010f3da574e93bfafb68a0149ae8d350202e71/chrome/browser/ui/views/validation_message_bubble_view.cc
[modify] https://crrev.com/1f010f3da574e93bfafb68a0149ae8d350202e71/chrome/browser/ui/views/validation_message_bubble_view.h

Comment 16 by tkent@chromium.org, Dec 20 2016

Labels: M-56
Labels: TE-Verified-56.0.2924.51 TE-Verified-56

Tested the issue on windows 7  using chrome version#56.0.2924.51 with the steps mentioned in comment #0.

Observed Message (Please fill out this field) about empty input is displayed close to empty input field itself.

Please find the attached screen cast for the same.

Adding TE-Verified labels.
660840.mp4
1.2 MB View Download
 Issue 681109  has been merged into this issue.

Sign in to add a comment