Summary: | CSS Triangles Rendering Regression affecting CSS Ribbons | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | hexalys <bruno> | ||||||||||||
Component: | Layout and Rendering | Assignee: | zalan <zalan> | ||||||||||||
Status: | RESOLVED FIXED | ||||||||||||||
Severity: | Normal | CC: | commit-queue, jonlee, simon.fraser, webkit-bug-importer, zalan | ||||||||||||
Priority: | P2 | Keywords: | InRadar | ||||||||||||
Version: | Safari 9 | ||||||||||||||
Hardware: | All | ||||||||||||||
OS: | All | ||||||||||||||
URL: | http://www.maisonrichard.com/test | ||||||||||||||
Attachments: |
|
Looks like sub pixel. Changed in the mid-late 160000's. Can't reproduce in a simple reduction. (In reply to comment #3) > Changed in the mid-late 160000's. > > Can't reproduce in a simple reduction. I know it a peculiar issue... After fiddling with it. One pointer I can give you is this: If you disable the 'font-size' on #footer in the example, or set it to 1em instead of 0.938em. The problem goes away. However that isn't the font size I want, and reveal that somthing is up. It appears the font-size is changing the pseudo(s) behavior in unexpected ways. Is that enough info for you the assess the cause and pinpoint what was changed? I have put together a minimal repro. http://goo.gl/RtOLiY Created attachment 275461 [details]
Test reduction
(In reply to comment #5) > I have put together a minimal repro. > http://goo.gl/RtOLiY Thanks for the reduction! This fixes the painting issue and matches FF's border sizing behavior (floor border width to device pixel). diff --git a/Source/WebCore/css/StyleBuilderConverter.h b/Source/WebCore/css/StyleBuilderConverter.h index ef6b19d..f9da9da 100644 --- a/Source/WebCore/css/StyleBuilderConverter.h +++ b/Source/WebCore/css/StyleBuilderConverter.h @@ -40,6 +40,7 @@ #include "CSSPrimitiveValue.h" #include "CSSReflectValue.h" #include "Frame.h" +#include "LayoutUnit.h" #include "Length.h" #include "LengthRepeat.h" #include "Pair.h" @@ -254,7 +255,7 @@ inline T StyleBuilderConverter::convertLineWidth(StyleResolver& styleResolver, C float minimumLineWidth = 1 / styleResolver.document().deviceScaleFactor(); if (result > 0 && result < minimumLineWidth) return minimumLineWidth; - return result; + return floorToDevicePixel(result, styleResolver.document().deviceScaleFactor()); } default: ASSERT_NOT_REACHED(); - I am expecting tons of rebaseline on this :( with this change getComputedStyle() reports the floored border width value, but that's also inline with what FF reports. Created attachment 275527 [details]
Patch
Comment on attachment 275527 [details] Patch Attachment 275527 [details] did not pass ios-sim-ews (ios-simulator-wk2): Output: http://webkit-queues.webkit.org/results/1095688 New failing tests: fast/block/float/016.html ietestcenter/css3/bordersbackgrounds/border-radius-style-002.htm fast/css/bidi-override-in-anonymous-block.html ietestcenter/css3/bordersbackgrounds/border-radius-style-001.htm ietestcenter/css3/bordersbackgrounds/border-top-left-radius-values-003.htm tables/mozilla_expected_failures/bugs/bug1055-2.html ietestcenter/css3/bordersbackgrounds/border-radius-with-three-values-001.htm ietestcenter/css3/bordersbackgrounds/border-radius-style-004.htm css1/units/length_units.html ietestcenter/css3/bordersbackgrounds/border-radius-with-two-values-001.htm ietestcenter/css3/bordersbackgrounds/border-radius-initial-value-001.htm Created attachment 275528 [details]
Archive of layout-test-results from ews124 for ios-simulator-wk2
The attached test failures were seen while running run-webkit-tests on the ios-sim-ews.
Bot: ews124 Port: ios-simulator-wk2 Platform: Mac OS X 10.10.5
Created attachment 275549 [details]
Patch
Comment on attachment 275549 [details] Patch Clearing flags on attachment: 275549 Committed r199034: <http://trac.webkit.org/changeset/199034> All reviewed patches have been landed. Closing bug. |
Created attachment 275444 [details] Visual of rendering defect on CSS Ribbon A rendering regression has ben introduced since at least Safari 8+ (perhaps as early as 7) which breaks CSS triangle shapes, as shown in the snapshot. If you visit the sample url on Safari 8 or 9, you can see the ribbon at the footer of the site does not render properly in Safari 8+. All other browsers including Webkit as far back as Safari 5.1 are showing the ribbon inner edges as expected.