Bug 174969 - `contents` value for display breaks layout in unexpected ways.
Summary: `contents` value for display breaks layout in unexpected ways.
Status: RESOLVED WORKSFORME
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 10
Hardware: Mac Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2017-07-29 01:39 PDT by Praveen Puglia
Modified: 2022-07-15 14:24 PDT (History)
4 users (show)

See Also:


Attachments
Layout break when using display:contents (74.18 KB, image/png)
2017-07-29 01:39 PDT, Praveen Puglia
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Praveen Puglia 2017-07-29 01:39:42 PDT
Created attachment 316707 [details]
Layout break when using display:contents

Here's a simple test case. The pen is by Rachel Andrew. I was unable to find if this was already reported here so posting it.

Safari 10 doesn't understand what display: flow-root is so it skips it and uses the default display value of a div (which is block) to render things as necessary. So it doesn't break the layout.

However, when the `contents` value is applied to display, it miserably breaks the layout. The attachment shows it all

https://codepen.io/rachelandrew/pen/rxvMWG
Comment 1 jonjohnjohnson 2018-12-11 22:20:07 PST
Cannot reproduce the attached image as of Safari 12.0.2. Most likely fixed.