elad2412/the-new-css-reset

Hyphenation not working in Chrome

tine-krueger opened this issue · 5 comments

tine-krueger commented

hyphens: auto; word-break: break-word; word-wrap: break-word;
will not set an hyphen in chrome. When I uncheck all: unset in dev tools, hyphen is set.

Example in Codepen: https://codepen.io/tillschweneker/pen/abLKXLR

elad2412 commented

@tine-krueger Interesting problem.

This happened because of a bug in Chrome when resetting the main <HTML> element.

I added this element add the :not(html) rule so that the CSS reset won't affect it.

Fixed in the new version, I just released - 1.6.0

Thanks! (Issue closed)

  • 🚀2
graymatter00 commented

@elad2412 This change of course means that the html element's properties are not being reset from the browsers style sheet values to the initial/unset values. This would seem to be inconsistent with the intentions of the-new-css-reset and could potentially create other problems. Yes/No?

This happened because of a bug in Chrome when resetting the main element.

Can you please elaborate on the Chrome bug or provide a link describing the bug?

elad2412 commented

@graymatter00 No, The HTML is getting only display: block by default from the User-agent-stylesheet, nothing else.

You can see the chrome bug @tine-krueger added on Codepen.

You can see more on Stackoverflow question that I asked.

  • 👍2
jpidelatorre commented

There seems to be another way. When you set the -webkit-locale for the HTML root, hyphens work again.

:root {
  -webkit-locale: 'en';
}

Sadly, values revert or initial don't work.

  • 👍1
astronomico commented

take care for the webpack config rules in test are not excluding node modules in loaders