Material Design Lite radio buttons and checkboxes don't display properly on upscaled displays (4K, 1080p 110% zoom)
Reported by
yoan.dim...@mentormate.com,
Jul 7 2017
|
||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36 Example URL: https://getmdl.io/components/index.html#toggles-section Steps to reproduce the problem: 1. Navigate to page 2. CTRL+ or CMD+ to upscale to 110% zoom or just look at the page if you're on a 4K display. What is the expected behavior? Checkbox does not have a white line on one or more of the sides. Radio button inner circle is centered correctly. What went wrong? Here are screenshots of the distorted elements: https://cloud.githubusercontent.com/assets/5341898/8637265/86a64adc-283d-11e5-81c9-81710c4ded55.png https://cloud.githubusercontent.com/assets/10334123/15740297/9b7e928e-28b4-11e6-83bb-8ab3ce6b9392.png Here is a github issue that explains in depth what people have found out: https://github.com/google/material-design-lite/issues/987 Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 59.0.3071.115 Channel: stable OS Version: OS X 10.12.5 Flash Version:
,
Jul 7 2017
These are 2 distinct issues, both related to sub-pixel positioning. The Checkbox is due to the background image not fitting correctly within the box. The radio button is 2 layout objects snapping different directions. That one is probably not fixable without modifying the underlying content. I own the background and may well already be fixing it. |
||
►
Sign in to add a comment |
||
Comment 1 by yoan.dim...@mentormate.com
, Jul 7 2017