New issue
Advanced search Search tips

Issue 891810 link

Starred by 1 user

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

blurry checkbox background image

Reported by dlockh...@gmail.com, Oct 3

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

Steps to reproduce the problem:
1. Apply a background image to a checkbox input with "appearance:none"
2. Also apply a border-radius, background position and background-repeat
3. See attached demo file or this JSBin: https://jsbin.com/fakubaqema/edit?html,css,output

What is the expected behavior?
The checkbox background image shouldn't be blurry.

What went wrong?
Starting with Chrome 69, the image is somewhat smaller and as a result is blurry.

Did this work before? Yes 68

Does this work in other browsers? Yes

Chrome version: 69.0.3497.100  Channel: stable
OS Version: OS X 10.12.6
Flash Version: 

If you remove the border-radius or the background-position or the background-repeat, it works fine. It's the combination of those properties being set that causes the issue.

Doesn't happen in any other browser, and this worked in Chrome 68.
 
demo.html
1.1 KB View Download
Components: Blink>Paint
Seem the same on my MacBook Pro. Over the paint team cause they might have an idea.
Owner: schenney@chromium.org
Status: Assigned (was: Unconfirmed)
There are two pathways for drawing background images: one for single-copy cases like the example logically is, and one for repeated cases. I believe that the improvements to sub-pixel background positioning have resulted in the path changing for the particular case. It's probably changed to use the non-repeating path since no-repeat causes the blurriness.

On my MacBook the difference is not visually noticeable although there are anti-aliasing differences if you magnify the screen.

I'll try to reproduce somewhere and bisect to confirm my understanding.
FWIW, for me the blurriness goes the other way.
Thanks for the quick triage & analysis.

The way this materializes in my actual application makes it appear worse than the demo -- our font sizes must be slightly larger such that the difference causes the background to also be a couple pixels higher and to the left in addition to being blurry, which results in it being off-center (screenshot attached).
blurry checkboxes.png
7.3 KB View Download
Thanks for the additional info that should help me reproduce. Sensitivity to size definitely suggests the issue is the different paths. The shift in the image is concerning, however. I would not expect that.

Sign in to add a comment