Ios : Date field overloaded by the OS

[matthieu-castier]

### Description On the site, when you have a date field (input[type="date"], the iPhone OS overloads the display. Maybe some information is missing in the reset.css A clear and concise description of the problem... ## 🔬 Steps to reproduce the issue

Go on https://www.leroymerlin.fr/servicesleadpage/services/leadpageapp/4CocdpD75F0GgS8Zr7u9Tz/NOT_SELLABLE_SERVICE?houseType=HOUSE&roofType=PERDU&postalCode=59000&surface=85 with an IOS phone

📷 Screenshot (optional - it might be a gif) or Sketch file (if existing)

But it's ok on Android :

🔥 Exception or Error

🌍 Your Environment

Styleguide Version:

Anything else relevant?

[tiloyi]

Hi @matthieu-castier , I hope you are doing well.

I just took a look at the page you indicated. Indeed I can reproduce the problem, but looking at the detail of the code, I notice that the CSS code that is generated in your page does not contain any vendor prefixes.

Your issue comes from there, because indeed, for the rule appearance: none; you are supposed to get the following output:

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;

So the problem comes from the way you build the SCSS Mozaic files.

Are you using Autoprefixer?

[ThomasRumasLM]

Hi Trésor,

We are using the postcss plugins from this package to compile our SCSS @mozaic-ds/css-dev-tools/postcssPluginConfig.js we are currently using this version ^1.0.1-beta.14

I see inside the file that when we use production value for MOZAIC_ENV variable, we don't have the autoprefixer plugin.

const productionPlugins = [
  cssprepend(`$mozaic-env: ${mozaicEnvScssVar};`),
  nodeSass({
    includePaths,
    outputStyle: 'expanded',
    indentWidth,
    precision: 7,
  }),
  base64({
    pattern: /<svg.*<\/svg>/i,
    prepend: 'data:image/svg+xml;base64,',
  }),
  mqpackerondemand({
    sort: true,
  }),
  cssnano(['default', { discardComments: { removeAll: true } }]),
]

That's why it's not generated on our side I guess.

[tiloyi]

Hi @ThomasRumasLM , Thank you very much for your message and clarification.

It's very strange that Autoprefixer is not in the production config. But yes, that's probably where the problem lies.

I will investigate this. Thank's

[tiloyi]

Hi @matthieu-castier , Hi @ThomasRumasLM , As seen together last week, the problem does indeed come from Mozaic.

As Thomas indicated, Autoprefixer was not included in the production build. After investigation it turns out that the problem has existed since the beginning of the project, for a reason I ignore. 🤦🏽‍♂️

I just did a PR that corrects this. So the problem on iOS (and potentially others related to this lack) will be fixed with the next release of Mozaic which will take place this Wednesday.

Thank's for your help 👌🏽