Bug 141367 - list-style-image with SVG image renders at incorrect size
Summary: list-style-image with SVG image renders at incorrect size
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P1 Critical
Assignee: Said Abou-Hallawa
URL:
Keywords: BlinkMergeCandidate
Depends on:
Blocks:
 
Reported: 2015-02-08 03:34 PST by paladox
Modified: 2015-07-10 08:22 PDT (History)
12 users (show)

See Also:


Attachments
test case (283 bytes, text/html)
2015-04-13 09:50 PDT, Said Abou-Hallawa
no flags Details
Expected (301 bytes, text/html)
2015-04-13 09:50 PDT, Said Abou-Hallawa
no flags Details
Patch (4.13 KB, patch)
2015-04-13 10:15 PDT, Said Abou-Hallawa
no flags Details | Formatted Diff | Diff
Patch (4.23 KB, patch)
2015-04-13 12:05 PDT, Said Abou-Hallawa
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description paladox 2015-02-08 03:34:24 PST
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.
Comment 1 paladox 2015-02-08 03:46:01 PST
the problem happens in iOS all version.  so could this please get this fixed.
Comment 2 paladox 2015-02-12 14:22:57 PST
Please fix it.
Comment 3 paladox 2015-02-12 17:01:11 PST
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.
Comment 4 paladox 2015-02-13 09:29:29 PST
The problem is also described here https://phabricator.wikimedia.org/T37338 and does it on Wikimedia.
Comment 5 Erwin Dokter 2015-02-16 01:02:51 PST
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.
Comment 6 paladox 2015-02-16 02:32:06 PST
Thanks for summerising the question.
Comment 7 paladox 2015-04-12 03:18:04 PDT
It seems this was fixed in chromium. Here is the code review. https://codereview.chromium.org/197203003/patch/1/10003
Comment 8 paladox 2015-04-12 03:27:50 PDT
Found where the code should be fixed https://trac.webkit.org/browser/trunk/Source/WebCore/rendering/RenderListMarker.cpp#L1377
Comment 9 paladox 2015-04-12 03:40:58 PDT
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.
Comment 10 Said Abou-Hallawa 2015-04-13 09:50:15 PDT
Created attachment 250644 [details]
test case
Comment 11 Said Abou-Hallawa 2015-04-13 09:50:44 PDT
Created attachment 250645 [details]
Expected
Comment 12 Said Abou-Hallawa 2015-04-13 10:15:51 PDT
Created attachment 250648 [details]
Patch
Comment 13 Darin Adler 2015-04-13 10:19:44 PDT
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.
Comment 14 zalan 2015-04-13 11:27:01 PDT
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.
Comment 15 Said Abou-Hallawa 2015-04-13 12:05:56 PDT
Created attachment 250662 [details]
Patch
Comment 16 Said Abou-Hallawa 2015-04-13 12:07:37 PDT
(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.
Comment 17 paladox 2015-04-13 12:45:08 PDT
Thankyou.
Comment 18 WebKit Commit Bot 2015-04-13 13:03:21 PDT
Comment on attachment 250662 [details]
Patch

Clearing flags on attachment: 250662

Committed r182751: <http://trac.webkit.org/changeset/182751>
Comment 19 WebKit Commit Bot 2015-04-13 13:03:29 PDT
All reviewed patches have been landed.  Closing bug.
Comment 20 Said Abou-Hallawa 2015-04-13 13:05:20 PDT
rdar://problem/20396634
Comment 21 paladox 2015-06-30 10:39:02 PDT
When will Apple include a updated WebKit because iOS 8.4 doesn't seem to show list style image correctly for svg  still.
Comment 22 Jon Lee 2015-07-10 08:06:29 PDT
(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.
Comment 23 paladox 2015-07-10 08:22:00 PDT
(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.