www.nicovideo.jp - Password is displayed with large bullets

[softvision-oana-arbuzov]

URL: https://www.nicovideo.jp/

Browser / Version: Firefox Nightly 68.0a1 (2019-04.09) Operating System: Windows 10 Pro Tested Another Browser: Yes

Problem type: Design is broken Description: Password is displayed with large bullets Steps to Reproduce:

1. Navigate to https://www.nicovideo.jp/
2. Click “Login” button.
3. Type in the email address and password.
4. Observe password field.

Expected Behavior: Small bullets are displayed.

Actual Behavior: Large bullets are displayed.

Note

1. Not reproducible on Chrome 73.0.3683.90.
2. Screenshot attached. Affected area:

   <p class="input-group neighbor">
   <label class="input-group__label">Password</label>
   <input id="input__password" type="password" name="password">
   </p>

Watchers: @softvision-oana-arbuzov @softvision-sergiulogigan @cipriansv

sv;

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

I think this might be related to a font not being supported on Firefox.

input, button, textarea {
    font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', sans-serif;
}

[karlcow]

This is the same issue than #19022 which is happening only to @softvision-oana-arbuzov 😉 The bullet displays correctly on macos for me. We closed the previous as worksforme. @cipriansv @softvision-sergiulogigan can you reproduce what @softvision-oana-arbuzov is experimenting.

[cipriansv]

I was able to reproduce the issue. There is a huge difference between the size of the bullets on the tested browsers.

Tested with: Browser / Version: Firefox Nightly 68.0a1 (2018-04-18), Chrome 73.0.3683.103 Operating System: Windows 10 Pro

This is the web page displayed in Firefox Nightly:

And this is the web page displayed in Chrome:

[softvision-oana-arbuzov]

Still reproducible for me also. Reopening for further investigation.

[karlcow]

fwiw this is the rendering on macOs

And these are the fonts used on my computer.

when you click on input in the inspector, the font panel shows for @softvision-oana-arbuzov

MS PGothic

which is exactly what is mentioned in

input, button, textarea {
    font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', sans-serif;
}

This ＭＳ Ｐゴシック means MS PGothic in Japanese. so far so good. https://www.linotype.com/876212/ms-gothic-family.html https://www.fxsitecompat.com/en-CA/docs/2017/japanese-default-fonts-have-been-changed/

Let's create a test. https://codepen.io/webcompat/pen/vMroOW

The first input is calling sans-serif The second input is calling MS PGothic.

Could you tell me the difference? For me there's none because there is no MS PGothic on my system.

The secondary question will be more why Chrome is disaplying something different.

https://bugzilla.mozilla.org/show_bug.cgi?id=1349839#c4

Firefox 52 uses MS PGothic as the default sans-serif while Chrome uses Meiryo on Win7, Yu Gothic on Win 10.

It has been changed on Vista. https://bugzilla.mozilla.org/show_bug.cgi?id=548311

It's possible that Chrome is picking up another one on your system.

But all of this is expected. :)

[karlcow]

@softvision-oana-arbuzov

Let's create a test. https://codepen.io/webcompat/pen/vMroOW

The first input is calling sans-serif The second input is calling MS PGothic.

Could you tell me the difference? For me there's none because there is no MS PGothic on my system.

[karlcow]

I will close as worksforme for now, but additional tests are welcome @softvision-oana-arbuzov

[softvision-oana-arbuzov]

@karlcow for me first bullets are small and the second are large. The same behavior was encounters on 2 different PCs with Windows. I also checked on Mac and indeed it is not reproducible.

Tested with: Browser / Version: Firefox Nightly 68.0a1 (2019-04.09) Operating System: Windows 10 Pro

[karlcow]

Thanks @softvision-oana-arbuzov so confirmed. this is just a dependency on the platform fonts.