847204 - Displays items not resized respectively when page resized -- was: citibank.com content badly formatted

Status: REOPENED

(Core :: Layout, defect)

Description

[u123541]

Attachment: Screenshots

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:22.0) Gecko/20130227 Firefox/22.0
Build ID: 20130227030925

Steps to reproduce:

Making online credit card payment on citibank.com


Actual results:

Citi recently changed their payment screen; it's now a popup.  On Nightly, it looks terrible. Attaching side-by-side screenshots of Nightly and IE8.  It appears as though some characters are being treated as newlines between radio buttons and their text.


Expected results:

Better formatting would make the popup much more legible.

Comment 1

[Loic]

Yeah, but I guess it's not public and we can't test. :/
Are you able to copy the source code of the pop-up on your machine and reproduce the issue locally?

Comment 2

[u123541]

You mean I shouldn't assume someone must have a Citi credit card?  :) :)
I was going to copy the code as an attachment; but didn't have time to dig it out of a pretty big code page...  I've never tried to reproduce a popup; but willing give it a shot...

Comment 3

[u123541]

Yikes... this is one humongous page with loads of .js and other files...  Save the page and even trying to display the saved page, the results are totally different visually.  The good news is that the "popup" (Citi calls it an "overlay" in the code) appears pretty much as originally reported, only at the bottom of the saved page which consists of 2375571 octets total.  I could redact the personal data and upload the lot as a tar.gz or zip if that would help...  let me know.

Comment 4

[Loic]

Yes, if the issue about the rendering is still present locally, upload the testcase as zip archive (don't forget to randomize personal data).

Comment 5

[u123541]

Attachment: full html save of web page

Sorry about the size.  Tried to reduce it; but then nothing appeared (visibility=hidden?).
This is not what the actual page looks like online; but the "overlay" looks the same -- it's about 1/2 way down the local display. Gave up trying to narrow down the code segment which is at <div id="dlg_8142_75"
HTH

Comment 6

[Loic]

I tried with old versions of Firefox (FF4/8) and same result as FF19+. So it could be an issue from the website, or and old bug in Firefox.

Comment 7

[u123541]

Just tested with more browsers...  here's the score:
firefox & konqueror have this flaw;
IE, chrome & opera render it just fine.
HTH

Comment 8

[Boris Zbarsky [:bzbarsky]]

Hmm.  For me on the attachment things look fine in a current nightly on Mac.  Presumably things depend on font metrics in some way here.... :(

Comment 9

[Loic]

Pierre, are you still able to reproduce the issue?

Comment 10

[u123541]

on 23.0a1 (2013-05-11), still the same.
More tests:
FF20.0.1/Windows7/VirtualBox/Linux = OK
Nightly/Windows7/VirtualBox/Linux = OK

Looks like this is only on the Linux version...  :(

Comment 11

[u123541]

In case it matters...
$ ldd /usr/local/bin/firefox23/firefox
        linux-vdso.so.1 =>  (0x00007fff85bff000)
        libpthread.so.0 => /lib64/libpthread.so.0 (0x00007f7613c99000)
        libdl.so.2 => /lib64/libdl.so.2 (0x00007f7613a95000)
        librt.so.1 => /lib64/librt.so.1 (0x00007f761388d000)
        libstdc++.so.6 => /usr/lib64/libstdc++.so.6 (0x00007f761358d000)
        libm.so.6 => /lib64/libm.so.6 (0x00007f761330b000)
        libgcc_s.so.1 => /lib64/libgcc_s.so.1 (0x00007f76130f6000)
        libc.so.6 => /lib64/libc.so.6 (0x00007f7612d6a000)
        /lib64/ld-linux-x86-64.so.2 (0x00007f7613eb5000)

Comment 12

[Boris Zbarsky [:bzbarsky]]

Then it's almost certainly a font metrics issue, with the Linux box in question just having slightly different fonts....

Comment 13

[u123541]

Aha!  How can I tell which font&size is currently in use?  If I Ctrl+scroll to change the size, there is a point where it switches from proper format to messed up.  Above that point, all sizes are OK; below, all bad...

Comment 14

[u123541]

Analyzing more closely, everything on the page gets resized EXCEPT for the radio buttons within the popup...

Comment 15

[Loic]

(In reply to Pierre Fortin from comment #13)
> Aha!  How can I tell which font&size is currently in use?

https://addons.mozilla.org/en-us/firefox/addon/fontinfo/

But using the Inspector should help you too.

Comment 16

[u123541]

Did some more testing...  FF & Nightly all mess up on both Linux and Windows7.  Just have to Ctrl+scroll downsize the page to trigger the issue.  IE8 doesn't have this problem.  So, not every item in the popup is resized equivalently.  HTH

Comment 17

[u123541]

Changed summary to better describe bug.

Comment 18

[u123541]

Attachment: 847204a.png

Problem persists. Needs a smaller font to display correctly. Currently requires hitting Ctrl+ 3 times to get correct display. Non-expert users rarely learn enough about browsers to find Ctrl-, Ctrl+, Ctrl0...

Comment 19

[Alice0775 White]

On Ubuntu14.04LTS 32bit + GNOME classic Ambiance And Ubuntu12.04LTS 32bit + GNOME Ubuntu Ambiance.

Regression range:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=1ee54e043b9b&tochange=939320b957c5

Triggered by: 939320b957c5	Mike Hommey — Bug 1186003 - Switch automated builds to Gtk+3. r=mshal

Comment 20

[u123541]

This appears to be resolved on the originally reported site (citibank.com).

Comment 21

[u123541]

Closing.
Leaving Mozilla products due to https://blog.mozilla.org/blog/2021/01/08/we-need-more-than-deplatforming/