Page MenuHomePhabricator

Vector: List bullet icon should not be low-res (pixelated on HiDPI screens)
Closed, ResolvedPublic

Description

Screenshot of en.wikipedia.org on iPad 3 with Retina display

Monobook and Vector skins set a bluish-cyanish bullet image for default ul/li list items.

This looks nice on traditional low-resolution screens, but is visibly pixelated on high-res displays like the iPad with Retina display, or when zooming in or printing.

Recommend using an SVG if possible, with PNG fallback.


Version: unspecified
Severity: normal

Attached:

IMG_0017.PNG (1×2 px, 925 KB)

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Hi but the problem is also on ios

Change 185690 had a related patch set uploaded (by Paladox):
Add .list-style-image-svg

https://gerrit.wikimedia.org/r/185690

Patch-For-Review

Change 185691 had a related patch set uploaded (by Paladox):
Add .list-style-image-svg: 'images/bullet-icon.svg', 'images/bullet-icon.png');

https://gerrit.wikimedia.org/r/185691

Patch-For-Review

Hi but the problem is also on ios

If this is regarded detrimental to iOS users, then maybe we should drop SVG support for bullets, and make it optional on a per-project basis. I'll leave the decision to @matmarex and @brion.

When opening bullet-image.svg on inkscape it seems to be very small in fact not Ethen inkscape can zoom in to see the image.

Calling any SVG wizards... did I over-optimize? I removed a <g> (group) element because there is only one <path>. Now my Inkscape won't show image at all... but it opens fine in my browsers.

It wont show for me in inskcape either.

You also missed <?xml version="1.0" encoding="UTF-8"?> in the image.

That is not required AFAIK. I'll leave it to the experts.

Hi it seems path is the problem. path seems to be stoping inkscape from working. if I use the prevous version of bullet from sepetember it works.

Path can't be the problem; that has always been there. I just got one of the numbers wrong when moving the transform.

OK, so shit's broken again after another one of Paladox's blind attempts at improving the situation? Do we need to revert things? I'll revert to known good state tomorrow unless somebody provides a concise summary of what is going on before then.

Concise summary:

Revert 182827: The original patch failed to embed the image (and SVG may be broken, see below)

You can safely merge patch 185690, which adds the .list-style-image-svg() mixin.

Hold patch 185691 (or abandon, needs rebase anyway after revert of 182827), which uses the above mixin for embedding, but my version of the SVG bullet may have an error, which I'm putting to the experts on Commons.

Change 185813 had a related patch set uploaded (by Bartosz Dziewoński):
Revert "Add svg image of bullet"

https://gerrit.wikimedia.org/r/185813

Patch-For-Review

Change 185813 merged by jenkins-bot:
Revert "Add svg image of bullet"

https://gerrit.wikimedia.org/r/185813

Thanks, Edokter. 185690 and 185691 should probably be merged together (if at all), so I'm not touching them now.

Please bonk me when there's something here worth testing/reviewing (and no sooner), I'm getting increasingly convinced that this bug is hopeless.

It's not hopeless, but my SVG is just over-optimized. I will report back here when I have a 100% complient SVG image.

SVG is fixed[1], but still @Paladox reports it to be too small in iOS8. What browser are you using? I cannot imagine Apple's own browser (which is Webkit) having this bug. Can someone else with an iPad confirm? You can test with [2] in your vector.css.

[1] https://commons.wikimedia.org/wiki/File:Vector-bullet-icon.svg

[2]

/* SVG list bullets */
ul {
    list-style-image: url(//upload.wikimedia.org/wikipedia/commons/b/bf/Vector-bullet-icon.svg);
    list-style-image: url(//upload.wikimedia.org/wikipedia/commons/9/90/Vector-bullet-icon.png)\9;
}
This comment was removed by Paladox.

Hi I have tested it using browser stack I tried it on the iPad air iOS 8 on browser stack I then tried iPad 4th generation on iOS 7 on browser stack and iPhone 6 plus iOS 8 on browser stack and they all show the bullet icon small. So it is a problem with the browser.

Maybe height background needs to be smaller since it I sent a png now. And so it doesent need a big background maybe that the problem I am not sure. May be WebKit shrinks the size on the browser.

The dimensions for the SVG are exactly the same as for the PNG. It's not the bugs listed above; this is specific to list-style-image on iOS/Webkit. Another sulution is media queries, but that requires a set of SVG images an I feel that is too much work to cater to a bug.

What about doing it in css. drawing the image in css.

Hi please see http://simple-random-wikisaur.tk/index.php/Special:SpecialPages which I am using the technique for creating a circle using css seems to work but causing a huge space in the sidebar.

on http://simple-random-wikisaur.tk/index.php/Special:SpecialPages I'm seeing bullets that are square and not center aligned with the items they are attached to…

viewing from Chrome 40.0.2214.85 beta (64-bit) OS X 10.10.1

Screenshot_2015-01-23_13.04.00.png (306×514 px, 36 KB)

Ok thanks I have changed it please could you try again.

Why not use this code

ul {

	 list-style-type: disc;
         content:"•";

}

Seems to work for me

they are blue now, but still square and misaligned.

Oh to me on iOS they look like circle and are aligned.

Caching problem sorry I see the squire now.

This comment was removed by Paladox.

I am using the image now looks small on iOS. I look for how to do it in css seems to not be working do you know how to do it in css.

the bullets are round now and black, but still see like the baseline is a bit off.

Could we use a css hack for iOS where it would use a different bullet icon that has been made more bigger.

@Jaredzimmerman-WMF, if you see black bullets, it means your browser is reverting to its default bullets, and not using either image. Also note that mobile view always use the default (black square) HTML bullets.

We could draw the bullet but I am not Sure how to do it I think the best way is to do it this way and add a notice that says please use google chrome in an android OS. And then draw the bullet. Giving us more time by testing it and also closing this bug.

Hi could someone upload the update svg image of the bullet please. I cArnt laptop broke so I sent it off for repaire. And I am wandering if someone could upload the updated image thanks.

It should be easer to support this in future if everyone moves away from Internet explorer and to new Microsoft browser called Spartan which Is made for modern.

Hi i have uploaded the updated icon.

Thanks, Edokter. 185690 and 185691 should probably be merged together (if at all), so I'm not touching them now.

Please bonk me when there's something here worth testing/reviewing (and no sooner), I'm getting increasingly convinced that this bug is hopeless.

The current patch set versions look good in desktop browsers, including IE 8 and Firefox. Let's give people a chance to test again in iOS, etc. before we merge (hopefully this week).

@Paladox, please do not use the updated icon; it shows too big on the rest. The iOS issue will have to be resolved in another way.

Using a viewBox hack in the SVG to 'trick' Webkit into using the correct dimensions appears to fix the problem. However, it requires setting the width and height to non-intrinsic values, which makes the SVG image useless for other purposes. So let's not go there.

I think I found the core of the iOS problem at https://code.google.com/p/chromium/issues/detail?id=350734 (intrinsic width and height ignored in list-style-image). This has been fixed in Chromium/Blink in March 2014. However, that was after Blink was split from Webkit, which Apple (as well as Safari and other Webkit-based browsers) continues to use, and probably still has this bug.

I can't find a relevant bug on https://bugs.webkit.org/, so someone may want to report this.

Hi I have reported it here https://bugs.webkit.org/show_bug.cgi?id=141367 please fill free to add more information if I did not add most of the information about the bug.

How would we fix the problem.

Should I change the height to something else a bit bigger to fix it from going to big

Hi well the image http://commons.wikimedia.org/wiki/File:Vector-bullet-icon.svg here seems to be working now on ios but it could be caching problem but it was showing the large bullet before I refreshed it and started to show the image.

This comment was removed by Paladox.

I changed the height to 8 and seems to be showing it correctly on ios.

Should I upload the image to show you.

Please don't do anything.

The image needs to be 5x13 (intrinsic size) to match the PNG, and to keep it usefull for other purposes. Webkit will just need to fix their stuff.

Hi what bout using a hack for ios to show the bullet a little bigger untill they fix the problem. by using the webkit @media so that it shows on its retina screen.

We shouldn't hack around bugs. Besides, @media is not webkit-only.

Oh ok. I am not sure how to use @media to get it to only show on ios. I know what is @media just not how to use it for displaying in ios screen.

What about using @media \\0 screen {} for safari. but it also applies to chrome 22-28 http://browserhacks.com/#hack-a13653e3599eb6e6c11ba7f1a859193e

or

@media only screen and (max-device-width: 480px),

   only screen and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone gte 4 CSS rules */

}

The patches can be merged now.

Change 185690 merged by jenkins-bot:
Add .list-style-image-svg

https://gerrit.wikimedia.org/r/185690

Change 185691 merged by jenkins-bot:
Add SVG version of bullet-icon and use .list-style-image-svg()

https://gerrit.wikimedia.org/r/185691

The iOS 8 issue is real, but it only applies to desktop mode, so is not as important (and even in desktop mode, there is still a bullet, and it is blue, it's just small).

In desktop mode, the bullets are black (and appear to be default browser bullets as @Edokter said), so there's no change there.

It was already like that in production:

iOS_mobile_mode_black_bullets_production.png (800×1 px, 1 MB)

The bullet shows for me. The image show and it's blue for me. But it is small. I've reported it on WebKit if you would like to add more information about the problem please add it.

I've reported it on WebKit

If you've reported it on WebKit, please add a link to your report.

The bullet shows for me. The image show and it's blue for me. But it is small. I've reported it on WebKit if you would like to add more information about the problem please add it.

This could be because you don't have MobileFrontend installed.

In T37338#1040792, @Mattflaschen wrote:

This could be because you don't have MobileFrontend installed.

Completely unrelated. MobileFrontend doesn't use any image for bullets. The relevant Chromium bug is https://code.google.com/p/chromium/issues/detail?id=350734.

In T37338#1040792, @Mattflaschen wrote:

This could be because you don't have MobileFrontend installed.

Completely unrelated. MobileFrontend doesn't use any image for bullets. The relevant Chromium bug is https://code.google.com/p/chromium/issues/detail?id=350734.

I don't think it's unrelated.

He said he saw a small blue bullet on iOS on his test site. If he was using MobileFrontend, he would see a black bullet. He might not be using MobileFrontend because it's not installed.

Even so, without MobileFrontend, he would revert to the Desktop view.

The bug was just patched now so it should be fixed.