webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
746 stars 66 forks source link

m.gsmarena.com - "1. introduction and unboxing" menu not centered #41660

Open webcompat-bot opened 5 years ago

webcompat-bot commented 5 years ago

URL: https://m.gsmarena.com/xiaomi_redmi_note_8_pro-review-1997.php

Browser / Version: Firefox Mobile 71.0 Operating System: Android Tested Another Browser: Yes

Problem type: Design is broken Description: "1. introduction and unboxing" menu not centered Steps to Reproduce: "1. introduction and unboxing" menu not centered. It's centered in chrome but not in firefox

Screenshot Description

Browser Configuration
  • None

From webcompat.com with ❤️

softvision-sergiulogigan commented 5 years ago

Thanks for the report! I'm able to reproduce the issue.

Tested with: Browser / Version: Firefox Preview Nightly 191007(🦎: 71.0a1-20191004094656) Operating System: OnePlus 6 (Android 9) - 1080 x 2280 pixels, 19:9 ratio (~402 ppi pixel density)

Moving to Needsdiagnosis.

wisniewskit commented 5 years ago

Confirmed. They have this CSS rule, which is causing the height of the select box to be taller than usual:

.grid_12 select {
    min-height: 31px;
}

Chrome visually centers the text, Firefox does not. However, both seem to behave the same way if height is used instead of min-height, so the site could probably just use that instead.

This seems to be reported already as: https://bugzilla.mozilla.org/show_bug.cgi?id=1362907

wisniewskit commented 5 years ago

I've sent them a quick email at support@gsmarena.com just in case they feel interested in trying my suggested fix above.