chrome merge bug

[jessehart]

http://codepen.io/hart/pen/QGJyKy?editors=0010

expected: font size is 50px
actual: font size is inherited

i also noticed this happens randomly with margin + padding: http://codepen.io/hart/pen/eBQJKe?editors=0010

expected: top padding is 50px
actual: top padding is 0

[ChristopherBiscardi]

This looks like a Chrome bug. It's easy to check by popping Firefox open. font: inherit is misplaced in Chrome. (newlines added by me)

Firefox.

.css-uymlcm,[data-css-uymlcm]{
-moz-box-sizing:border-box;
box-sizing:border-box;
border-width:0;
border-style:solid;
margin:0;
padding:0;
font:inherit;
text-transform:inherit;
text-decoration:none;
font-size:50px;
margin-right:5px;
}

Chrome

.css-uymlcm,[data-css-uymlcm]{
-moz-box-sizing:border-box;
box-sizing:border-box;
border-style:solid;
margin:0;
padding:0;
border-width:0;
text-transform:inherit;
text-decoration:none;
font-size:50px;
margin-right:5px;
font:inherit;
}

[threepointone]

having a look at this

[threepointone]

so yeah, it looks like a chrome quirk, with a very specific set of properties. I'll investigate that further, but as a workaround for you, isn't font inherited by default? guessing you don't need that line.

[jessehart]

well, i have a component that acts like a reset (in my application we can't have a global reset as it would affect third party integrations -- this works similarly to react native web. so the font/padding/margin one is a rather annoying problem for my case.

when i have styles that modify this component, like adding a specific margin or padding direction, the merge is unpredictable in chrome.

thanks for looking into it!