list-style-image with SVG image renders at incorrect size

• Component: SVG
• Status: RESOLVED FIXED

[paladox]

Hi there seems to be a bug in webkit where it is showing the svg small on ios where it is showing correctly on other browsers. Please read more https://code.google.com/p/chromium/issues/detail?id=350734 here. The problem seems to when you set the width and height of background not image and then it shows correctly in ie,chrome and other browsers ecept on ios.

[paladox]

the problem happens in iOS all version.  so could this please get this fixed.

[paladox]

Please fix it.

[paladox]

This problem is only with ios since I can only try it on ios and not safari. this may be a webkit problem. please could someone fix this. This should not be an issue on the iOS os.

[paladox]

The problem is also described here https://phabricator.wikimedia.org/T37338 and does it on Wikimedia.

[Erwin Dokter]

To summarize: The core problem is that the intrinsic size of the SVG is ignored when used in list-style-image. This results in the SVG not being sized correctly when the device resolution is higher than 1dppx.

This was fixed in Chromium as linked by OP.

[paladox]

Thanks for summerising the question.

[paladox]

It seems this was fixed in chromium. Here is the code review. https://codereview.chromium.org/197203003/patch/1/10003

[paladox]

Found where the code should be fixed https://trac.webkit.org/browser/trunk/Source/WebCore/rendering/RenderListMarker.cpp#L1377

[paladox]

And the code to fix the issue from chromium is at https://chromium.googlesource.com/chromium/blink/+/master/Source/core/layout/LayoutListMarker.cpp on line 1183.

[Said Abou-Hallawa]

Created attachment 250644 [details]
test case

[Said Abou-Hallawa]

Created attachment 250645 [details]
Expected

[Said Abou-Hallawa]

Created attachment 250648 [details]
Patch

[Darin Adler]

Comment on attachment 250648 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=250648&action=review

> Source/WebCore/rendering/RenderListMarker.cpp:1427
>          int bulletWidth = style().fontMetrics().ascent() / 2;

I wonder if we really want to round up to an integer here before converting to a LayoutSize. Worth talking to Zalan about which kind of rounding/snapping is best here.

[zalan]

Comment on attachment 250648 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=250648&action=review

>> Source/WebCore/rendering/RenderListMarker.cpp:1427
>>          int bulletWidth = style().fontMetrics().ascent() / 2;
> 
> I wonder if we really want to round up to an integer here before converting to a LayoutSize. Worth talking to Zalan about which kind of rounding/snapping is best here.

updateContent() is called during layout and we normally snap at painting. There are a few exceptions, but rule of thumb of snapping is that it should only happen right before painting.
Please use LayoutUnit instead of int. -to avoid any kind of rounding/snapping here.

[Said Abou-Hallawa]

Created attachment 250662 [details]
Patch

[Said Abou-Hallawa]

(In reply to comment #14)
> Comment on attachment 250648 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=250648&action=review
> 
> >> Source/WebCore/rendering/RenderListMarker.cpp:1427
> >>          int bulletWidth = style().fontMetrics().ascent() / 2;
> > 
> > I wonder if we really want to round up to an integer here before converting to a LayoutSize. Worth talking to Zalan about which kind of rounding/snapping is best here.
> 
> updateContent() is called during layout and we normally snap at painting.
> There are a few exceptions, but rule of thumb of snapping is that it should
> only happen right before painting.
> Please use LayoutUnit instead of int. -to avoid any kind of
> rounding/snapping here.

As suggested, I changed the bulletWidth in RenderListMarker::updateContent() to be of type LayoutUnit to avoid the integer rounding.

[paladox]

Thankyou.

[WebKit Commit Bot]

Comment on attachment 250662 [details]
Patch

Clearing flags on attachment: 250662

Committed r182751: <http://trac.webkit.org/changeset/182751>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Said Abou-Hallawa]

rdar://problem/20396634

[paladox]

When will Apple include a updated WebKit because iOS 8.4 doesn't seem to show list style image correctly for svg  still.

[Jon Lee]

(In reply to comment #21)
> When will Apple include a updated WebKit because iOS 8.4 doesn't seem to
> show list style image correctly for svg  still.

You may wish to try out the recently released public beta.

[paladox]

(In reply to comment #22)
> (In reply to comment #21)
> > When will Apple include a updated WebKit because iOS 8.4 doesn't seem to
> > show list style image correctly for svg  still.
> 
> You may wish to try out the recently released public beta.

Hi yes it is fixed in ios 9.