W3C home > Mailing lists > Public > www-style@w3.org > September 2012

Re: [css-regions] Handling content overflow out of its region range

From: Alan Stearns <stearns@adobe.com>
Date: Thu, 13 Sep 2012 14:50:18 -0700
To: "www-style@w3.org" <www-style@w3.org>
CC: Andrei Bucur <abucur@adobe.com>, "hyatt@apple.com" <hyatt@apple.com>, "Tab Atkins Jr." <jackalmage@gmail.com>
Message-ID: <CC7797C3.160DF%stearns@adobe.com>
On 9/7/12 9:42 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:

>On Fri, Sep 7, 2012 at 9:13 AM, Alan Stearns <stearns@adobe.com> wrote:
>> Correction: WebKit displays the content in one of the subsequent
>>columns,
>> and Gecko and Opera display the content below the multicolumn element. I
>> have too many windows open, sorry for the error. The Gecko and Opera
>> multicol behavior makes sense to me, and I don't understand the WebKit
>> behavior.
>
>Ah, kk, now I get it.  Yes, I agree, go with the Gecko/Opera behavior.
>
>Our behavior is crazy.  I think we just literally slice the renderer
>and restart it in the next column, which is why sometimes you'll get
>an element at the end of one column, and it's bottom border and shadow
>at the start of the next.
>
>~TJ

I think there's lots of craziness to spread around, in part because there
isn't a spec that says what should happen. The test below renders
differently in FF, IE, Chrome/Safari and Opera. Some of the differences
look like bugs to me, but part of the problem is differing interpretations
of underspecified interactions.

I'll start a separate thread with some text I think should be added to
css3-break, as this isn't an issue limited to regions and isn't strictly
about overflow.

Thanks,

Alan

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Argh</title>
  <style>
    .spacer {
      height: 100px;
    }
    .multicol {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      -ms-column-count: 2;
      column-count: 2;
      height: 3em;
      background-color: lightyellow;
    }
    .rel {
      position: relative;
      top: 3em;
    }
    .top-of-col {
      font-size: 36px;
      line-height: 12px;
    }
  </style>
</head>
<body>
  <div class="spacer"></div>
  <div class="multicol">
    <div class="top-of-col">One</div>
    <div class="rel">Two</div>
    <div class="top-of-col">Three</div>
    <div>Four</div>
  </div>
</body>
</html>
Received on Thursday, 13 September 2012 21:50:48 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:00 GMT