Rounded edge on Google Chrome iOS buttons

Asked

Viewed 205 times

4

I recently updated my Macbook here and now all the buttons on my site are rounded. I even thought it was some CSS error, but no, entering my Windows computer is normal. Can anyone tell me what is going on?

css ios

  • Put an example MCVE, because it can be conflict of one or more rules.

  • So, not really, because I didn’t touch any CSS file, and suddenly it changed. As @Karl Zillner below said is the version. I’m accessing a my old Macbook here and it’s not rounded, already in my current Macbook of the tramp, is rounded. Madness.

  • Yes, but sometimes it can be a rule that has changed too and not the border-Radius itself, of course everything suggests that the answer is right, but many things may have changed too, MCVE serves for this, to be sure what we are responding, if we are not based on hypotheses.

  • Giving the Inspect in the Voce element sees what are the default styles of the browser. If you take an earlier version of Chrome it does not have the attribute border-Radius

  • @Karlzillner was a great shot, but that can be a problem, assuming is good sometimes, but you can’t always say that this is it, especially if the question does not contain a MCVE (read link https://answall.com/help/mcve), your answer must be right, but the instructions I gave was for William, MCVE is a good way to ensure good questions.

  • Create an . html file with the line <button>MCVE</button> and Inspecione the element.... I did the test here.... and Webkit changed the default css of the buttons from that latest version

  • @Karlzillner you do not understand the purpose of the MCVE, read the debate on the Meta: https://pt.meta.stackoverflow.com/q/6600/3635

  • I am teaching to take the test... in case of this problem this is the only way to verify if this is the same problem.

  • @Karlzillner, I’m not talking about taking tests, or doing tests, which I know how to do, the problem is you understand how the community works and understand that questions without MCVE can contain more problems, it has nothing to do with the problem itself, I’ve said more than once, the problem is about possible sub-problems that can occur because we do not have a MCVE to test, see the Debate in META, everything is explained there.

Show 4 more comments

1 answer

5


Chrome has released a change to the default CSS of the browser itself.

From the version that was updated this month Version 62.0.3202.94 (Official version) 64 bits

The attribute border-Radius comes by default with 4px for following tags:

input[type="button" i], 
input[type="submit" i], 
input[type="reset" i], 
input[type="file" i]::-webkit-file-upload-button, 
button {
    border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    padding: 1px 7px 2px; 
}

The solution is to add a CSS Reset at the beginning of your CSS file as follows:

input[type="button" i], 
input[type="submit" i], 
input[type="reset" i], 
input[type="file" i]::-webkit-file-upload-button, 
button {
    border-radius: 0;
}

  • Wow. That’s crazy! This will affect many sites.. but anyway, thanks for your answer, I hope you help others with the same problem as me! Thank you.

  • 1

    Pois é...there are a lot of people who are not aware of this who has broken site for Chrome on iOS updated....

Browser other questions tagged css ios

You are not signed in. Login or sign up in order to post.