Next.js: next seems to break text-size-adjust css property

[quentin-sommer]

• [x] I believe that this is not a duplicate.

Expected Behavior

The text-size-adjust property is part of many css reset (including normalize, check out the first selector https://necolas.github.io/normalize.css/7.0.0/normalize.css). its goal is to prevent browsers from inflating or deflating text in weird ways when the site is viewed on mobile.

This is how it should behave: https://media.giphy.com/media/3oKIPz6jOMmO3tQkqk/giphy.gif

Current Behavior

And this is how it behaves when used with next.js https://media.giphy.com/media/l4FGBK6OrUm10Xd5e/giphy.gif

Steps to Reproduce (for bugs)

• Setup a new next.js project
• add normalize (just paste it in a style tag)
• add some text (full page length for best results)
• use chrome dev tools responsive tool.

Your Environment

• next 3.0.1-beta.9
• node 8.1.3
• ubuntu 64
• chrome 60.0

[arunoda]

May be that's because we are rendering the app inside a div.
Anyway, we don't ship any CSS with Next.js.

[quentin-sommer]

(sorry for the close, wrong button on mobile phone)

I know we don't ship any css with next, what bothers me is that this css rule works with the official cra and nwb, it's only in next that the problem exist.

I'm going to investigate this, the issue is to keep track of the bug publicly

[elrumordelaluz]

@quentin-sommer weird, sounds like something no related to _Next.js_.

Could you deploy your example with now to explore the same project?

[stevebluck]

Do you have <meta name="viewport" content="width=device-width, initial-scale=1"> in the head?

[quentin-sommer]

^ you nailed it @stevebluck

[timneutkens]

Nice 😄