New issue
Advanced search Search tips

Issue 839383 link

Starred by 4 users

Issue metadata

Status: Fixed
Owner:
Closed: May 2018
Cc:
Components:
EstimatedDays: ----
NextAction: 2018-05-04
OS: Android
Pri: 3
Type: Bug



Sign in to add a comment

Elements are painted in wrong position in sites with viewport <meta> tag

Reported by of...@wix.com, May 3 2018

Issue description

Sites using the viewport <meta> tag get horizontal scrollbar with elements being rendered in the wrong positioning.
The bug is easily reproduced by zooming in/out

Using viewport meta tag like so:
<meta name="viewport" content="width=320, user-scalable=yes">

I was able to reproduce the bug on latest Chrome on a Macbook (using dev tools mobile view),
and on any Android device (did not reproduce on iOS).

See video link.


A device I've tested for example:

From "Settings > About Chrome"
Application version: 66.0.3359.126
Operating system: Android 8.0.0; SM-G950F Build/R16NW

Site for example:
http://ofers-storage.surge.sh/chrome-bug

Video of the bug for example:
https://youtu.be/FIeb0ba4BBA

Steps to reproduce:
(1) Open the link on an Android device or dev tools mobile view
(2) Zoom in a bit (pinch) 
(3) Scroll right!
(4) Inspect elements on the right and see it paints in wrong positioning

Expected result:
(1) There should not be any horizontal scroll.
(2) Elements should be painted and rendered on the same location

* In my URL example, try clicking the button at the left side of it (after reproducing steps 1 to 3). click is not handled.


Actual result:
(1) Elements are painted and rendered in different locations
(2) An horizontal scrollbar is displayed, and the user is able to scroll right


I've investigated this for a while, and it seems that this bug happens only when the <meta> viewport *width* value is smaller than the actual width of the device (device screen). When I tried bigger viewport width, everything worked as expected.

I work at Wix.com, and this bug affects many of our sites for users using Android devices.
The bug did not reproduce on "Samsung internet".
The bug did not reproduce on Chrome version 63.0.3239

Please help us solve this


 
Screen Shot 2018-05-03 at 17.14.04.png
353 KB View Download
Components: Blink>Scroll

Comment 2 by bokan@chromium.org, May 3 2018

Labels: Type-Bug
NextAction: 2018-05-04
Owner: bokan@chromium.org
Status: Assigned (was: Unconfirmed)
I can repro - that does look wrong. Will take a closer look.
The NextAction date has arrived: 2018-05-04

Comment 4 by of...@wix.com, May 6 2018

Hi
Any updates about this ticket?

Thanks

Comment 5 by of...@wix.com, May 17 2018

Hi, Any updates on this ticket?

This issue affects many of Wix's sites, and we need your help to resolve it..

Can anyone response?
Thanks!!

Comment 6 by bokan@chromium.org, May 17 2018

Sorry, I haven't had time in the last few weeks. I'll take a look shortly but I'm unlikely to get to it until next week.

Comment 7 by of...@wix.com, May 17 2018

thanks for the reply

Comment 8 by bokan@chromium.org, May 25 2018

Cc: bokan@chromium.org
 Issue 843498  has been merged into this issue.

Comment 9 by bokan@chromium.org, May 25 2018

This is caused by my fix to bug 811406 - it didn't account for the viewport layers correctly. Fix will land soon.

Comment 10 by of...@wix.com, May 26 2018

Thank you very much Bokan
This fix will help us a lot!
Project Member

Comment 11 by bugdroid1@chromium.org, May 29 2018

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

commit 292c5503e26e295328655cbdf82f62f829c77f51
Author: David Bokan <bokan@chromium.org>
Date: Tue May 29 17:28:47 2018

Fix visual viewport scrolling contents size

In https://crrev.com/cead2e78a8e7e9acba07fd4f3d6ab2c9b3713e18 I made it
so that a scrolling content layer must be at least as large as its
container layer. This is true for all scrollers except the visual
viewport.

The visual viewport's scrolling content is the layout viewport. The
layout viewport is sized based on the page's minimum scale factor. The
maximum scroll offset is calculated by multiplying the visual viewport's
content size by the current page scale factor. The constraint added in
the patch above meant that the maximum scroll offset was incorrect and
allowed scrolling outside the bounds of the document.

The fix here is to use the minimum scale factor in computing the minimum
contents size for the visual viewport.

Bug:  839383 
Change-Id: I9d7c1a4ead4b05ef6624705b7dc189d9cc2855cf
Reviewed-on: https://chromium-review.googlesource.com/1073878
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: David Bokan <bokan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#562486}
[modify] https://crrev.com/292c5503e26e295328655cbdf82f62f829c77f51/third_party/blink/renderer/core/frame/visual_viewport_test.cc
[modify] https://crrev.com/292c5503e26e295328655cbdf82f62f829c77f51/third_party/blink/renderer/core/page/scrolling/scrolling_coordinator.cc

Comment 12 by bokan@chromium.org, May 30 2018

Status: Fixed (was: Assigned)
This should be fixed as of 69.0.3445.0 which is today's canary. Please give it a try and let me know if you're still seeing issues.

Comment 13 by mil...@ecwid.com, May 31 2018

This fix helped for my issue https://bugs.chromium.org/p/chromium/issues/detail?id=843498

Comment 14 by of...@wix.com, May 31 2018

Looks good from our side.
Thanks a lot!

Sign in to add a comment