G+ icon(i.e.Google plus) is seen misplaced after translating page.
Reported by
db...@etouch.net,
Jul 6 2017
|
||||||||
Issue descriptionChrome Version: 61.0.3150.0 Revision e32c608bfaee28eb9bd478073a2f222fb6c28133-refs/heads/master@{#484424}(32/64 bit) OS: Windows (7,8,8.1,10),Linux (14.04 LTS),Mac OS X(10.10.5, 10.11.4) URL: https://support.google.com/chrome/answer/95464?visit_id=0-636349289078757152-2793788288&p=incognito&rd=1#incognito What steps will reproduce the problem? (1) Launch chrome, navigate to above URL, change the page language from English drop down. (2) Click on Translate button from translation bubble then observe the G+ icon near share this: Actual: G+ icon is misplaced after translating page. Expected: G+ icon should not misplaced after translating page. This is a non-regression issue, seen from 'M-40'
,
Jul 6 2017
It seems that Translate is adjusting the page content in such a way that the G+ element moves. Moving over to the translate team to debug their change. One thing would be to Inspect the G+ element before and after translate to see what has changed.
,
Jul 6 2017
The Translate step is adding <font> tags around the sharing text inside the <span> element. That is increasing the height of the sharing text <span> element and draws the text at the bottom of the taller span, making it look out of alignment with the <button> for the G+ icon.
,
Jul 6 2017
Jon - looks like another Translate element bug.
,
Jul 11 2017
,
Jul 11 2017
,
Jul 20 2017
,
Jul 26 2017
The short story is that the <font> tags that are injected by Translate will cause changes to how the CSS rules are applied for the page. In this case: - The shared text is in a span with a class of "social-sharing-text" which, - via the CSS rules will apply the attribute of vertical-align: top - While vertical-align: top is inherited by the <font> block, it is not applied. - It is not applied because its parent (the original span) has a height: auto - It works for the original span, because its parent resolves its height to 48px and provides a concrete scope for applying the vertical-align: top This is probably only one example in a set of CSS issues that result from modifying the dom tree. Historically, the <font> blocks wrapping the translated text would have been deliberately added to resolve other issues, so just removing them is unlikely to be an option. Will dig deeper to see what we can do.
,
Sep 7 2017
An internal fix for this has been submitted by another engineer and will roll out with the next translate server push. Will close this bug once the fix is live in prod.
,
Sep 19 2017
The translate server with the fix was pushed to prod on 15 September 2017. Verified that the vertical-align style is now correctly inherited by the <font> nodes. Marking as fixed. |
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by rbasuvula@chromium.org
, Jul 6 2017