122061 – Gap rendered between nested elements

NEW 122061

Gap rendered between nested elements

https://bugs.webkit.org/show_bug.cgi?id=122061

Summary Gap rendered between nested elements

Mafoo

Reported 2013-09-28 06:23:55 PDT

Created attachment 212898 [details] html file demonstrating nested element render bug If you place one element inside another, even if the parent has 0px padding and the child has 0px margin, there will still be a very thin gap between the 2 elements. This is most noticeable when you combine the 2 with a border radius. It is especially noticeable when zoomed in. This present in chrome and safari.

Attachments
html file demonstrating nested element render bug (528 bytes, text/html) 2013-09-28 06:23 PDT, Mafoo	no flags	Details
Patch (4.84 KB, patch) 2014-02-14 02:16 PST, Deepak Mittal	no flags	Details Formatted Diff Diff
Archive of layout-test-results from webkit-ews-04 for mac-mountainlion (1.38 MB, application/zip) 2014-02-14 03:17 PST, Build Bot	no flags	Details
Archive of layout-test-results from webkit-ews-13 for mac-mountainlion-wk2 (1.13 MB, application/zip) 2014-02-14 04:04 PST, Build Bot	no flags	Details
Patch (1.63 KB, patch) 2014-02-17 01:57 PST, Deepak Mittal	no flags	Details Formatted Diff Diff
Patch (4.45 KB, patch) 2014-02-17 02:19 PST, Deepak Mittal	no flags	Details Formatted Diff Diff
Archive of layout-test-results from webkit-ews-15 for mac-mountainlion-wk2 (543.81 KB, application/zip) 2014-02-17 03:15 PST, Build Bot	no flags	Details
Archive of layout-test-results from webkit-ews-05 for mac-mountainlion (582.80 KB, application/zip) 2014-02-17 03:37 PST, Build Bot	no flags	Details
Archive of layout-test-results from webkit-ews-02 for mac-mountainlion (635.07 KB, application/zip) 2014-02-17 03:50 PST, Build Bot	no flags	Details
Patch (7.47 KB, patch) 2014-02-19 21:03 PST, Deepak Mittal	no flags	Details Formatted Diff Diff
Archive of layout-test-results from webkit-ews-13 for mac-mountainlion-wk2 (461.10 KB, application/zip) 2014-02-19 21:59 PST, Build Bot	no flags	Details
Archive of layout-test-results from webkit-ews-03 for mac-mountainlion (496.30 KB, application/zip) 2014-02-19 22:29 PST, Build Bot	no flags	Details
Archive of layout-test-results from webkit-ews-08 for mac-mountainlion (492.88 KB, application/zip) 2014-02-19 23:24 PST, Build Bot	no flags	Details
Patch (7.90 KB, patch) 2014-02-23 23:31 PST, Deepak Mittal	simon.fraser: review-	Details Formatted Diff Diff
Show Obsolete (4) View All Add attachment proposed patch, testcase, etc.

Deepak Mittal

Comment 1 2014-02-11 02:04:03 PST

I am not able to reproduce this issue on the latest webkit build code.. I am able to see clearly the border of 1px between the box and box2. I have changed the border color to distinguish it. The border of the box is visible that is of 1 px. Please recheck this issue..and let me know your opinion..

Deepak Mittal

Comment 2 2014-02-11 02:04:33 PST

I am using : <style> body{background:#F00;} .box{ border-radius: 15px; border: 1px solid #0F0; margin:50px; overflow: hidden; padding: 0px;} .box2{ background: #00F; padding: 100px; margin: 0px;} .correctBox{border-radius: 15px; border: 1px solid #0F0; margin:50px; background: #ddd; padding: 100px; } </style> <body> <div class="box"><div class="box2">Nested Divs. This has a thin border where the background shows through, especially on the corners</div></div> <div class="correctBox">Single Div. This is how it should look</div> </body> as the content.

Deepak Mittal

Comment 3 2014-02-12 06:44:41 PST

I am working on this issue.. I found the cause of this issue..if possible pleased assigned it to me..

Deepak Mittal

Comment 4 2014-02-14 02:16:37 PST

Created attachment 224183 [details] Patch

Build Bot

Comment 5 2014-02-14 03:17:30 PST

Comment on attachment 224183 [details] Patch Attachment 224183 [details] did not pass mac-ews (mac): Output: http://webkit-queues.appspot.com/results/5302609371987968 New failing tests: fast/media/viewport-media-query.html css3/masking/clip-path-polygon-percentage.html fast/regions/list-item-as-region.html fast/shapes/shape-inside/shape-inside-empty.html fast/shapes/shape-inside/shape-inside-overflow-fixed-dimensions-block-content.html fast/regions/content-flowed-into-regions-dynamically-added.html csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002.html fast/regions/content-flowed-into-regions.html css2.1/20110323/margin-collapse-012.htm fast/css/margin-collapse-abspos-negmargin.htm fast/css/table-border-radius-with-box-shadow.html css3/flexbox/cross-axis-scrollbar.html csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001.html fast/gradients/css3-color-stop-invalid.html fast/regions/overflow-moving-below-floats-in-variable-width-regions.html css3/calc/border-radius.html csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003.html fast/css/object-fit/object-fit-video-poster.html fast/regions/content-flowed-into-regions-dynamically-inserted.html csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000.html fast/multicol/rule-thicker-than-gap.html csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001.html fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html fast/css/margin-collapse-top-margin-clearance-with-sibling.html csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006.html csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-000.html fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html fast/multicol/cell-shrinkback.html fast/regions/content-flowed-into-pseudo-regions.html

Build Bot

Comment 6 2014-02-14 03:17:32 PST

Created attachment 224192 [details] Archive of layout-test-results from webkit-ews-04 for mac-mountainlion The attached test failures were seen while running run-webkit-tests on the mac-ews. Bot: webkit-ews-04 Port: mac-mountainlion Platform: Mac OS X 10.8.5

Build Bot

Comment 7 2014-02-14 04:04:45 PST

Comment on attachment 224183 [details] Patch Attachment 224183 [details] did not pass mac-wk2-ews (mac-wk2): Output: http://webkit-queues.appspot.com/results/6105253799788544 New failing tests: fast/media/viewport-media-query.html css3/masking/clip-path-polygon-percentage.html fast/regions/list-item-as-region.html fast/shapes/shape-inside/shape-inside-empty.html fast/shapes/shape-inside/shape-inside-overflow-fixed-dimensions-block-content.html fast/regions/content-flowed-into-regions-dynamically-added.html csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002.html fast/regions/content-flowed-into-regions.html css2.1/20110323/margin-collapse-012.htm fast/css/margin-collapse-abspos-negmargin.htm fast/css/table-border-radius-with-box-shadow.html css3/flexbox/cross-axis-scrollbar.html csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001.html fast/gradients/css3-color-stop-invalid.html fast/regions/overflow-moving-below-floats-in-variable-width-regions.html css3/calc/border-radius.html csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003.html fast/css/object-fit/object-fit-video-poster.html fast/regions/content-flowed-into-regions-dynamically-inserted.html csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000.html fast/multicol/rule-thicker-than-gap.html csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001.html fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html fast/css/margin-collapse-top-margin-clearance-with-sibling.html csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006.html csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-000.html fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html fast/multicol/cell-shrinkback.html fast/regions/content-flowed-into-pseudo-regions.html

Build Bot

Comment 8 2014-02-14 04:04:49 PST

Created attachment 224196 [details] Archive of layout-test-results from webkit-ews-13 for mac-mountainlion-wk2 The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews. Bot: webkit-ews-13 Port: mac-mountainlion-wk2 Platform: Mac OS X 10.8.5

Deepak Mittal

Comment 9 2014-02-17 01:57:40 PST

Created attachment 224342 [details] Patch

WebKit Commit Bot

Comment 10 2014-02-17 01:59:34 PST

Attachment 224342 [details] did not pass style-queue: ERROR: Source/WebCore/ChangeLog:8: You should remove the 'No new tests' and either add and list tests, or explain why no new tests were possible. [changelog/nonewtests] [5] Total errors found: 1 in 2 files If any of these errors are false positives, please file a bug against check-webkit-style.

Deepak Mittal

Comment 11 2014-02-17 02:19:27 PST

Created attachment 224347 [details] Patch

Build Bot

Comment 12 2014-02-17 03:15:07 PST

Comment on attachment 224347 [details] Patch Attachment 224347 [details] did not pass mac-wk2-ews (mac-wk2): Output: http://webkit-queues.appspot.com/results/5451981489438720 New failing tests: fast/css/table-border-radius-with-box-shadow.html css3/calc/border-radius.html

Build Bot

Comment 13 2014-02-17 03:15:09 PST

Created attachment 224349 [details] Archive of layout-test-results from webkit-ews-15 for mac-mountainlion-wk2 The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews. Bot: webkit-ews-15 Port: mac-mountainlion-wk2 Platform: Mac OS X 10.8.5

Build Bot

Comment 14 2014-02-17 03:37:45 PST

Comment on attachment 224347 [details] Patch Attachment 224347 [details] did not pass mac-ews (mac): Output: http://webkit-queues.appspot.com/results/5949304342577152 New failing tests: fast/css/table-border-radius-with-box-shadow.html css3/calc/border-radius.html

Build Bot

Comment 15 2014-02-17 03:37:47 PST

Created attachment 224352 [details] Archive of layout-test-results from webkit-ews-05 for mac-mountainlion The attached test failures were seen while running run-webkit-tests on the mac-ews. Bot: webkit-ews-05 Port: mac-mountainlion Platform: Mac OS X 10.8.5

Build Bot

Comment 16 2014-02-17 03:50:10 PST

Comment on attachment 224347 [details] Patch Attachment 224347 [details] did not pass mac-ews (mac): Output: http://webkit-queues.appspot.com/results/5586606568243200 New failing tests: fast/css/table-border-radius-with-box-shadow.html css3/calc/border-radius.html

Build Bot

Comment 17 2014-02-17 03:50:12 PST

Created attachment 224354 [details] Archive of layout-test-results from webkit-ews-02 for mac-mountainlion The attached test failures were seen while running run-webkit-tests on the mac-ews. Bot: webkit-ews-02 Port: mac-mountainlion Platform: Mac OS X 10.8.5

Deepak Mittal

Comment 18 2014-02-17 06:37:00 PST

I have run 1) fast/css/table-border-radius-with-box-shadow.html without my patch, Still I am not able to get the expected result, so this test case failure is not due to my changes. 2) css3/calc/border-radius.html I am not able to get any difference with and without my patch.. Can some please confirm this ..

Deepak Mittal

Comment 19 2014-02-17 06:50:00 PST

Mafoo , can you please check the 2 test cases that it is showing error..and my observation..

Deepak Mittal

Comment 20 2014-02-19 21:03:04 PST

Created attachment 224703 [details] Patch

Build Bot

Comment 21 2014-02-19 21:59:53 PST

Comment on attachment 224703 [details] Patch Attachment 224703 [details] did not pass mac-wk2-ews (mac-wk2): Output: http://webkit-queues.appspot.com/results/6383319377772544 New failing tests: fast/css/table-border-radius-with-box-shadow.html

Build Bot

Comment 22 2014-02-19 21:59:55 PST

Created attachment 224710 [details] Archive of layout-test-results from webkit-ews-13 for mac-mountainlion-wk2 The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews. Bot: webkit-ews-13 Port: mac-mountainlion-wk2 Platform: Mac OS X 10.8.5

Build Bot

Comment 23 2014-02-19 22:29:24 PST

Comment on attachment 224703 [details] Patch Attachment 224703 [details] did not pass mac-ews (mac): Output: http://webkit-queues.appspot.com/results/5895483033649152 New failing tests: fast/css/table-border-radius-with-box-shadow.html

Build Bot

Comment 24 2014-02-19 22:29:27 PST

Created attachment 224715 [details] Archive of layout-test-results from webkit-ews-03 for mac-mountainlion The attached test failures were seen while running run-webkit-tests on the mac-ews. Bot: webkit-ews-03 Port: mac-mountainlion Platform: Mac OS X 10.8.5

Build Bot

Comment 25 2014-02-19 23:24:54 PST

Comment on attachment 224703 [details] Patch Attachment 224703 [details] did not pass mac-ews (mac): Output: http://webkit-queues.appspot.com/results/5431848024932352 New failing tests: fast/css/table-border-radius-with-box-shadow.html

Build Bot

Comment 26 2014-02-19 23:24:57 PST

Created attachment 224718 [details] Archive of layout-test-results from webkit-ews-08 for mac-mountainlion The attached test failures were seen while running run-webkit-tests on the mac-ews. Bot: webkit-ews-08 Port: mac-mountainlion Platform: Mac OS X 10.8.5

Deepak Mittal

Comment 27 2014-02-23 23:31:40 PST

Created attachment 225029 [details] Patch

Deepak Mittal

Comment 28 2014-02-24 04:31:36 PST

Can someone review this patch please..And let me know if any query..

zalan

Comment 29 2014-03-02 12:38:17 PST

Comment on attachment 225029 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=225029&action=review > Source/WebCore/rendering/RenderBox.cpp:1157 > + return BackgroundBleedBackgroundOverBorder; I am not sure if it's the right approach to fix background bleeding over nested items. Not only the return value is contradicting the condition (!hasBackground() -> BackgroundBleedBackgroundOverBorder), but I can make a small change to your test case and the bleeding comes back. -the small change is moving the background color from the body to the outer div box. Now that the background color is on the <div> as opposed to the <body>, this condition evaluates to false and the bleeding happens.

Simon Fraser (smfr)

Comment 30 2014-03-04 13:56:57 PST

Comment on attachment 225029 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=225029&action=review >> Source/WebCore/rendering/RenderBox.cpp:1157 >> + return BackgroundBleedBackgroundOverBorder; > > I am not sure if it's the right approach to fix background bleeding over nested items. Not only the return value is contradicting the condition (!hasBackground() -> BackgroundBleedBackgroundOverBorder), but I can make a small change to your test case and the bleeding comes back. -the small change is moving the background color from the body to the outer div box. Now that the background color is on the <div> as opposed to the <body>, this condition evaluates to false and the bleeding happens. Zalan is right. > LayoutTests/fast/dom/HTMLDivElement/div-border-radius-expected.html:8 > + body{background:#F00;} > + .box{ background:#FFF; border-radius: 30px; border: 1px solid #FFF; margin:50px; overflow: hidden; padding: 0px;} > + .box2{ background: #FFF; padding: 100px; margin: 0px;} > + .correctBox{border-radius: 30px; border: 1px solid #FFF; margin:50px; background: #FFF; padding: 100px;} Please format your CSS nicely.

Deepak Mittal

Comment 31 2014-03-13 03:52:54 PDT

(In reply to comment #29) > (From update of attachment 225029 [details]) > View in context: https://bugs.webkit.org/attachment.cgi?id=225029&action=review > > > Source/WebCore/rendering/RenderBox.cpp:1157 > > + return BackgroundBleedBackgroundOverBorder; > > I am not sure if it's the right approach to fix background bleeding over nested items. Not only the return value is contradicting the condition (!hasBackground() -> BackgroundBleedBackgroundOverBorder), but I can make a small change to your test case and the bleeding comes back. -the small change is moving the background color from the body to the outer div box. Now that the background color is on the <div> as opposed to the <body>, this condition evaluates to false and the bleeding happens. when putting the background color from body to the outer div then irrespective of my changes,bleading happens, it is irrespective of bleading value. I have tried return BackgroundBleedBackgroundOverBorder BackgroundBleedNone BackgroundBleedUseTransparencyLayer But it still shows the red bleading at the corners, so this is not related to my changes.As with or without my changes it returns BackgroundBleedBackgroundOverBorder.. To avoid bleading in the modified test case BackgroundBleedShrinkBackground should get return from RenderBox::determineBackgroundBleedAvoidance().We can file separate issue for this.. Please let me know your opinion..

Radar WebKit Bug Importer

Comment 32 2024-08-16 10:56:27 PDT

<rdar://problem/134068501>

Note You need to log in before you can comment on or make changes to this bug.

Status NEW

Resolution

Priority P2

Severity Normal

Classification Unclassified

Version 528+ (Nightly build)

Hardware All

OS All

Product WebKit

Component Layout and Rendering

Assignee

Deepak Mittal

Reported

2013-09-28 06:23 PDT

Modified

2024-08-16 10:56 PDT History

CC List

11 users Show

URL

Keywords InRadar

Depends on

Blocks