Web-bugs: www.wazzeo.com - design is broken

Created on 23 Nov 2017 · 13Comments · Source: webcompat/web-bugs

Browser / Version: Firefox 58.0
Operating System: Mac OS X 10.9
Tested Another Browser: Yes

Problem type: Design is broken
Description: Wazzeo table DatePicker width isn't well calculated
Steps to Reproduce:
Click on "When" (Quand) field.

layout.css.servo.enabled: true

_From webcompat.com with ❤️_

Re-triaged browser-firefox status-contact-success status-first-contact

Source

Quentame

Most helpful comment

@karlcow i just fixed the missing <!doctype html> on https://wazzeo.com/

@adamopenweb i just fixed the cors issue (https calling http)

thanks you :+1:

aless673 on 1 May 2018

❤3

All 13 comments

Browser / Version: Google Chrome 62.0.3202.94 (64 bits)
Operating System: Mac OS X 10.9

capture d ecran 2017-11-23 a 14 40 17

Quentame on 23 Nov 2017

Thanks for the report @Quentame. This seems to be related to the use of min-width: 32px; in the calendar table.

.daterangepicker .calendar th, .daterangepicker .calendar td {
    white-space: nowrap;
    text-align: center;
    min-width: 32px;
}

In Chrome the min-width property seems to include padding and border:
screen shot 2017-11-23 at 5 40 23 pm

But Firefox is adding padding and border on to the 32px cell width:
screen shot 2017-11-23 at 5 40 33 pm

Setting as needs diagnosis.

adamopenweb on 23 Nov 2017

@adamopenweb said

In Chrome the min-width property seems to include padding and border

That seems plausible. Let's see. If I force the min-width to be 24px then I get the same layout.

.daterangepicker .calendar th, .daterangepicker .calendar td {
    white-space: nowrap;
    text-align: center;
    min-width: 24px;
}

That would obviously break in Chrome.

Now let's try a reduced test case.
https://codepen.io/webcompat/pen/eMXZoB

I get the same rendering. So there is something else. This is not only the min-width + padding issue.

After isolating most of the code. we get

So any issue will be in this scope only.

karlcow on 11 Apr 2018

Reducing even more the context.

karlcow on 11 Apr 2018

so far I have been unsuccessful to create a reduce test case. but isolating the issue at its maximum on the site itself. I'm able to see that Chrome is ignoring the horizontal padding in the display and that this related to box-sizing somehow.

Running into circles.

karlcow on 11 Apr 2018

And the reduced test case with the same values… sigh

karlcow on 11 Apr 2018

This issue is also reproducible on Windows 10 and Nightly 61:

softvision-sergiulogigan on 26 Apr 2018

ok finally found!
The website is in quirks mode!
They should put a doctype <!doctype html> to have consistent rendering in between Chrome and Firefox.