1257974 - allegro.pl - disappearance of web page elements on any Windows DPI higher than 100%

Status: RESOLVED INVALID

(Core :: Graphics, defect)

Description

[marcino245]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0
Build ID: 20160303134406

Steps to reproduce:

A reproduction of the bug on the movie (sorry, it's kinda low fps, because it was on my old PC with Intel Celeron G550, which is not good enought for recording of movies):

https://www.youtube.com/watch?v=OQOCAogJkFA


Actual results:

I thought I bought a working motherboard (at least as it looked on my screen) on Allegro.pl (something like Ebay in Poland), and when I paid for the item and then I received it I realized it is damaged, so at first it seemed to me that the seller cheated me, but no...he showed me that on his screen the item has description "damaged" (Uszkodzony). So the bug is about dissappearing of some webpage's elements (a description of an item in my case). I lost some of my money due to this. The incredible & unlucky bug (and funny at the same time). The bug happens on Windows XP SP3 with 120 DPI and 1280x1024 resolution (or similiar), when the window of Firefox 44.02 (or Opera 35) is maximized (in my case it was so at the time of buying the item), or if the window (not maximized) has width 1287 pixels in Firefox 44.02 or 1292 pixels in Opera 35. The bug also happens when the window is zoomed in or out, for example at 90% of the size, but in this case, at different window's width. The bug seems to happen on resolutions 1280x600 or higher like: 1280x600,  1280x720, 1280x768, 1280x800, 1280x960, 1280x1024. I don't know if on higher too, as I have 1280x800 and 1280x1024 max on my computers. It is not required to have a monitor with such psychical resolution to reproduce the bug, you only need to set (emulate) such resolution in your screen's properthies settings. The bug does not happen on Safari. If you don't have Windows XP SP3, you may reproduce the bug on Virtual Machine. The bug also happens (randomly) with other items. The bug also is 100%  reproductible on my 3 other PCs in my house - all with Windows XP SP3 + 120 DPI + 1280x800/1280x1024. I don't know if the bug happens on higher DPI than 120.

And the main question is: does it is even a Firefox's bug ? Or Windows XP SP3's or the webpage's ? As  the technical stuff of Allegro.pl claim that this is Windows XP SP3's bug.


Expected results:

Elements of webpages should not dissappear on 120 DPI.

Comment 1

[marcino245]

Attachment: PROPERLY (a description of an item is visible).png

Comment 2

[marcino245]

Attachment: IMPROPERLY (a description of an item is invisible).png

Comment 3

[Loic]

I see the image with resolution at 125% on 1080p screen.

Comment 4

[marcino245]

I just checked, and I confirm that the bug is reproductible when changing Firefox (unmaximixed) window's width with Winspy or by hand (the method 2) as I described above, but I just realised that to reproduce the bug by the 1st method (maximize browser's window) you need to do 2 things more:

1. Display Properties >> Appearance >> Font Size >> Large
2. Display Properties >> Appearance >> Effects >> Use the following method to smooth edges of screen fonts >> ClearType

Sorry for this, please try again Loic with the method 1.

Also by the way, since these 2 additional steps are required for the method 1 only, you have still should been able to reproduce the bug by the method 2 without these 2 additional steps...(maybe you have tried the 1st method only?)

Comment 5

[marcino245]

After more analysis, I determined more details:
- the bug appears on each Windows XP DPI more than 100% (even on 101%)
- there is no other (additional) settings required to cause (reproduce) the bug, 

so all the previous settings I mentioned required to reproduce bug like:
- setting custom screen resolution
- setting large font
- setting Clear Type 

are now obsolete and invalid (except a single special case I will talk about later)

Steps to reproduce the bug (an usual case):
1) Display Properties >> Settings >> Advanced >> General >> set Windows XP DPI higher than 100% (at least 101%) 
2) After changing DPI you need to restart your pc.
3) Run Firefox or Opera
4) Load an URL with the item on Allegro.pl for example: 
http://allegro.pl/gigabyte-z97-hd3-lga-1150-ddr3-okazja-i5998826608.html
5) Make sure the browser's window is unmaximzed.
6) Slowly keep changing width of the browser's window (as on the video) (you may do this manually but if you are unable, you may use any program like Winspy for help purposes, as the program gives a higher (1px) precision)

Steps to reproduce the bug (the single special case, I mentioned above, and in which I lost my money):
The single special case is just a pure accident, in which the bug appears without manually changing the width of the browser's window, instead of this, the bug appears just when you load the URL when the browser's window is maximized, because the width of the browser's window accidently has already the right size in px required as in the usual case. Steps to reproduce:
1) Do the step 1 as above (like in the usual case), but set 120 DPI (125%)
2) Do the step 2 as above (like in the usual case)
2) Do the step 1 from comment 4.
3) Do the step 2 from comment 4.
4) Do the step 3 as above (like in the usual case)
5) Do the step 4 as above (like in the usual case)
6) Maximize your browser.

Actual results:

The usual case:
At some moment, at some width (px) (different and individual for every Windows DPI setting), the item description will dissappear, then if you resize the width 1 px more, the item description will appear again. The same happens in the opposite direction. (as on the video)

The single special case:

When the browser's window is maximized, the item description will dissappear when unmaximized, the item description will appear again, and so on.

Expected results:

Elements of webpages should not dissappear on higher Windows XP DPI sizes.

Additional note: 
- the bug is reproductible also in Virtual Machine + clean install of Windows XP SP 3 + clean install of Firefox 45 Standard, Nightly 48, Opera 36,

Please confirm the bug.

Comment 6

[marcino245]

1 step more to the single special case: set screen resolution to minimum 1280 width (for ex. 1280x800 or 1280x1024).(In case you reproduce on Viirtual Machine: in Virtual PC 2007 SP1 you have to install VM additions to set 1280 resolutions.)

Comment 7

[Jonathan Kew [:jfkthame]]

The fact that the problem can be reproduced with Opera (which uses a completely different layout engine) as well as Firefox suggests that this may not be a browser bug.

It's also extremely unlikely to be a Windows bug. I don't have a suitable machine or VM on hand to reproduce this at the moment, but from the description above, I think it is most probably a site bug.

I notice that the allegro.pl site seems to be altering its layout in response to changes in the size (width) of the browser window. I guess it's using either CSS media-queries or JavaScript to do this. There's probably a particular size where, maybe due to rounding of fractional-pixel dimensions, it falls "between" two layout options -- if the window is slightly larger, the element is displayed in one way, if it's smaller, it is displayed in another way -- but at exactly the "wrong" size, neither display option applies and the element disappears.

The fact that in some cases, font size and/or cleartype settings apparently affected the bug makes me suspect the site might be measuring the width of some text, comparing this to the width of the window, and making layout choices based on the result. And with just the wrong combination of window and text sizes, none of its layout choices work.

Comment 8

[Loic]

I'm able to make the image disappear but not the text. Same with IE11.

Comment 9

[Jonathan Kew [:jfkthame]]

It's probably very sensitive to the precise metrics of the text -- which can be expected to vary between browsers, depending on how they handle text measurement & rendering. E.g. do they apply kerning? do they use fractional glyph metrics? what kind of hinting? etc.

Comment 10

[marcino245]

Thank you guys, before I created the bug on bugzilla I used a similiar argumentation and I wanted Allegro.pl to abort the transaction and give me back my money I wasted for delivery (2x, because I also need to send the item back to the seller) so this way I can send back the item to the seller, and the seller send me my money back too. But Allegro.pl technical stuff claims that the bug is not on their side, and they blame Windows XP SP3 as an old and problematic OS. I told them I will check this and ask other programmers. (I did not tell them yet that I will come here and ask bugzilla programmers). So after some time I want to send them a link to the bug on Bugzilla, that they can read the explanations why it is a bug on their side...

Comment 11

[marcino245]

And it's not just about money, it's also about whether they avoid responsibility for their bugs (if the bug is on their side).

Comment 12

[Jonathan Kew [:jfkthame]]

Looking at the style rules in index.min.css from their site, I see things like

    @media (min-width:600px) and (max-width:767px) {
        .visible-ss {
            display:block!important
        }
        table.visible-ss {
            display:table
        }
        tr.visible-ss {
            display:table-row!important
        }
        td.visible-ss,th.visible-ss {
            display:table-cell!important
        }
    }
    @media (min-width:768px) and (max-width:1023px) {
        .visible-sm {
            display:block!important
        }
        table.visible-sm {
            display:table
        }
        tr.visible-sm {
            display:table-row!important
        }
        td.visible-sm,th.visible-sm {
            display:table-cell!important
        }
    }
    @media (min-width:1024px) and (max-width:1139px) {
        .visible-md {
            display:block!important
        }
        table.visible-md {
            display:table
        }
        tr.visible-md {
            display:table-row!important
        }
        td.visible-md,th.visible-md {
            display:table-cell!important
        }
    }

(and many more such...)

It looks like there are a bunch of classes .visible-ss, .visible-sm, .visible-md, etc., that are used to make elements visible at various window sizes (very-small, small, medium, etc). These classes are all hidden by default:

    .visible-lg,.visible-md,.visible-sm,.visible-ss,.visible-xm,.visible-xs {
        display:none!important
    }

and made visible when the relevant @media query matches.

The trouble is that on a high-resolution display (or in other words, with Windows scaling factor > 100%), it's possible for the browser window to be resized in steps that are smaller than 1px (one CSS pixel), because the window is sized according to the screen's device pixel resolution. So it's possible that the width will be, say, 1023.5px, in which case neither the @media query for .visible-sm nor the one for .visible-md will match, and the content controlled by these classes -- which includes the critical text that you didn't see -- remains hidden.

The flawed assumption here, I think, is that the size of the browser window -- as tested by the width media query -- will always be an integer number of CSS pixels. That's not guaranteed to be the case. The 'width' media query is testing a <length>, and lengths (regardless of what units they're measured in -- remember that they could equally well be expressed as points or inches or centimeters instead of pixels) are not necessarily integer values.

Comment 13

[marcino245]

Thank you very much for your great explanation, this is clearly a bug on their side, especially since I discovered just right now, that the bug occurs (in the both cases - the usual and the special !) also on...Windows 7 Ultimate SP1 64bit with Aero on! (as on my new PC with Windows 7, I have DPI 125% too). Do you believe... this is a little funny as I even did not suspect that the bug will even exist on Windows 7 so I created the bug on bugzilla from the new PC, without even checking whether the bug occurs on...the new PC (Windows 7). Now you guys may reproduce the bug easy on your Windows 7 machines, and as I'm wondering whether the bug also occurs on Windows 8/8.1/10, could anybody check? Thanks. I'm also wondering now what will be Allegro.pl's team's argumentation now, since they no longer can call Windows 7(and maybe 8/8.1/10) an old or problematic OS.

Comment 14

[marcino245]

Oh and btw. a question: how can I (or You) fill "platform" info of the bug with multi-OS or multi-architecture? As the bug occurs on Windows XP & 7 (and maybe 8/8.1/10 too) and on 32 & 64 bit.

Comment 15

[marcino245]

Sorry, I forgot, as the bug is not a Firefox's bug, it is not important to fill any fields anymore, but I leave the question open as the answer might helpful for future.

Comment 16

[marcino245]

After I wrote to them 2 weeks ago that the bug occurs on Windows 7 SP1 too, they wrote back to me that they will contact the tech stuff and they wrote to wait for the reply. After two weeks with no reply, I started to pull teeth yesterday and finally they replied yesterday and pleaded guilty but they gave me no damages, and offered me to send me gadgets (prizes / giftes / bonuses) instead. I would prefer the damages but better the gadgets than nothing. So now I'm waiting for the shipment of gadgets and I'm curious what they send me. And I also have to sell the damaged mobo to somebody else to get my money back.

Comment 17

[marcino245]

OK:
They sent me the gadgets yesterday: a new 2.5" 320GB Portable HDD + 2 x etui for a cell phone. I am satisfied with the gadgets, although they did not fix the bug yet, I wish them to fix it soon, I don't know if they know the cause of the bug already, but I'm giving them the link to here now, so they will get to know the cause of the bug, as Jonathan Kew explained. 

I also resigned from uploading my non-16:9 format videos on Youtube (Google), coz it reduces/resizes the videos resolution to 720p without my consent, and thus drastically destroys the quality of the video, as it reduced my 1280x1024 videos to 900x720. Not mentioning about their ugly (scanty) and illegible visually forums. So I switched to sendvid.com. 

So I reuploaded the old Windows XP SP3 video: 
http://sendvid.com/fdqbia08

and also made a new video with the bug reproduction on Windows 7 SP1: 
http://sendvid.com/yhurjk4a

As you may see on the videos, the difference in the quality is drastical in favor of sendvid.com's native res videos.

Now it's time to close the bug as Firefox unrelated (invalid).