Created attachment 400534 [details] HTML that shows margin on a figure in one column improperly affecting the next I have a figure that exactly reaches the bottom of a column. Even though the figure is entirely contained within a single column, margin-bottom on this figure affects the subsequent column. If I adjust the margin-top of the figure so that the bottom of the image no longer reaches the bottom of the column, then the margin-bottom behaves as I'd expect, and doesn't affect the subsequent column.
<rdar://problem/63851666>
Created attachment 460803 [details] test case Slightly modifying the test so it can be tested on any browsers, and not just webkit browsers.
Created attachment 460804 [details] Rendering in Safari, firefox, chrome Rendering in Safari Technology Preview 16.0 Firefox Nightly 104.0a1 Google Chrome Canary 105.0.5174.0 Both Chrome and Firefox are pushing the image to the next column I wonder if we can reduce a bit more the test.
I tried to reproduce with a little animation to see if there was a pattern in between browsers, but the issue disappears when I do that. https://codepen.io/webcompat/pen/poLEzJR
Actually, in Safari, the new "test case" attachment moves the image to the next column as well (as it does in Chrome and Firefox). This is because the "test case" attachment doesn't just remove the "-webkit" prefixes from a few properties, but adds other things as well. In particular, it adds "<!DOCTYPE html>" at the beginning, which causes the browser to use Standards mode (as opposed to Quirks mode). This is why we see different behavior between the first attachment and the second. And this is likely why Karl couldn't repro in his animation. In Quirks mode, when the image reaches the bottom of a column (exactly), then the margin-bottom affects the next column. I will add another attachment ("quirky test case") that illustrates this, and doesn't use properties with "-webkit" prefixes. If you change the figure's margin-top from 15px to 14px in this example, you'll see that the margin-bottom no longer affects the next column (as in my original report). The behavior in Standards mode is different. In Standards mode, the figure will *never* reach the very bottom of the column. I will add another attachment ("standard test case") that shows this. In that example, if you change the figure's margin-top from 11px to 12px, then the image will move to the next column. I think the fact that the figure can't ever reach the very bottom of the column is another bug. The figure's margin-top should be able to be 15px without it being forced to the next column. In both Chrome and Firefox, the behavior is the same in both Quirks and Standards modes. However, since the text layout is different (see attached "Safari vs Chrome Layout with Guides"), the image will reach the very bottom of the column when the figure's margin-top is only 11px, and switch when margin-top is changed to 12px. This is the same inflection point as the "standard test case" in Safari — is that a coincidence? In short, there's a Safari bug in either mode. In Quirks mode, the margin-bottom affects the next column when it shouldn't; in Standards mode, the figure won't ever reach the bottom of the column.
Created attachment 460831 [details] quirky test case
Created attachment 460832 [details] standard test case
Created attachment 460833 [details] Safari vs Chrome Layout with Guides This screenshot shows Safari (in the back) and Chrome (front). The top and bottom guides show that the columns are the same height. The middle guide shows the baseline of the last line of text, which is lower in Chrome than in Safari.
Ah! I didn't realize you were expecting Quirks mode. Is there a specific website breaking because of this?
Our application, Vellum, relies on Quirks mode (for historic reasons).
Also thanks a lot for the test cases and explanations. This is useful.
My pleasure! Also, please let me know if you think that I should submit these (related) bugs separately: 1) Image does not reach the bottom of the column in Standards mode 2) Column text layout is different when compared to Chrome/Firefox
Yes always better to have separate bugs for different type of issues.
Looks like the text layout issue I referred to above ("Column text layout is different when compared to Chrome/Firefox") is covered by this webkit bug: https://bugs.webkit.org/show_bug.cgi?id=225695 And I've filed a bug for the (related?) issue where the "image does not reach the bottom of the column in Standards mode": https://bugs.webkit.org/show_bug.cgi?id=242708
Created attachment 467758 [details] HTML showing figure improperly affecting next column [Quirks] I just filed a similar – though not identical? - bug here: https://bugs.webkit.org/show_bug.cgi?id=261752 When creating the HTML for that bug, I made this repro case a tiny bit simpler. Namely, I reduced the column count and made the math easier. In this simpler case, in quirks mode, we still see that the margin-bottom on the <figure> improperly affects the next column.
Created attachment 467759 [details] HTML showing figure improperly affecting next column [Standard] When creating the HTML for a similar bug (https://bugs.webkit.org/show_bug.cgi?id=261752), I made this repro case a tiny bit simpler. Namely, I reduced the column count and made the math easier. In this simpler case, in standards mode, even though there is enough space for the image, it get moved to the next column. This is different than the original attachment where – likely because the math is different – the image doesn’t actually reach the bottom of the column (even though it should).
We are still hitting this issue, so I wanted to update this bug. In particular, I’m removing “QuirksMode” from the Summary, since I worry that that is a distraction. I don’t believe that’s relevant, and I will be submitting two more attachments that illustrate this issue.
Created attachment 472084 [details] HTML showing incorrect gap at top of column (after floating figure)
Created attachment 472085 [details] HTML showing incorrect gap at bottom of column (after floating figure)
Created attachment 472086 [details] Screenshot comparing Safari and Chrome (top gap)
Created attachment 472087 [details] Screenshot comparing Safari and Chrome (bottom gap)
I’ve added two more HTML attachments and two more screenshots that illustrate the incorrect behavior in Safari (vs correct behavior in Chrome).
Tested in Safari 18.0 (20619.1.18.11.1) on Sequoia 15.0 Beta (24A5279h), and the bug still manifests.