New issue
Advanced search Search tips

Issue 827098 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner:
Closed: Mar 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Trip advisor favicon gets overlap on Sign In text of gmail.com

Reported by shruti.j...@etouch.net, Mar 29 2018

Issue description

Chrome Version: 67.0.3383.0 Revision b6c093c42e2a0eb8c2d8c9dc76171b59dc65568d-refs/heads/master@{#546671}(32/64 bit) 
OS: Windows(7,8,8.1,10), Mac(10.12.6,10.13.1,10.13.4),Linux(14.04 LTS)


What steps will reproduce the problem?
1.Launch chrome, and navigate to https://www.tripadvisor.in/
2.Click on JOIN and select google and observe the overlay of gmail.com

Actual: Trip advisor favicon gets overlap on Sign In text of gmail.com

Expected: Trip advisor favicon should not get overlap on Sign In text of gmail.com


This is a non-regression issue, seen from M60 build #60.0.3072.0

Note:Issue is not seen on Firefox.
Kindly Refer the attached video for your reference.

Thank You!

 


 
Actual.mov
5.6 MB View Download
Expected.mov
2.2 MB View Download
Status: Untriaged (was: Unconfirmed)

Comment 2 by e...@chromium.org, Mar 30 2018

Owner: atotic@chromium.org
Status: Assigned (was: Untriaged)
Would you mind looking into this one Aleks? 

Comment 3 by atotic@chromium.org, Mar 31 2018

Status: WontFix (was: Assigned)
This is not a Chrome bug, it is an incorrect CSS.
The same bug is present in Firefox.

Bug is there only if you are not signed in into Google (no account picker).
With account picker, "Choose an account" is positioned correctly.

I've found the cause, it is CSS.

DOM in question looks like this:

<div>
  <div class="blah blah" data="buggy">
    <img>
  </div>
  <div id="view_container">
    Sign in
  </div>
</div>

This displays correctly on "Choose an account" variant of the page, but badly on
"Sign in" variant.

The difference is

in "Choose an account" variant, buggy div has
box-sizing: content-box;
height: 24px;
which makes buggy div content size 24px.

in "Sign in" variant, buggy div has
box-sizing: inherit;
which resolves to border-box;
which makes buggy div content size 0px;

Buggy div is too short, which pulls "Sign in" up, and overwrites the icon.

Sign in to add a comment