Center vertically menu icon in Chrome for Mobile - css

I have a menu icon that's perfectly vertically centered in all browsers but in Chrome for Mobile not. This is the code for the menu icon:
-HTML-
<div class="menuIcon">
<p class="im im-menu"></p>
</div>
-CSS-
.menuIcon{
border: 2px solid #ddd;
border-radius: 4px;
cursor: pointer;
display: flex;
margin-left: auto;
padding: 2px 6px;
color: #424242;
transition: background-color 0.8s ease 0s;
}
.menuIcon:hover{
background-color: #ddd;
}
.im {
display: inline-block;
font: normal normal normal 24px/1 'iconmonstr-iconic-font';
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I tried with line-height: 24px and other properties but with no result. With padding: 6px 2px 2px is more or less centered in Chrome for Mobile but in desktop browsers is malformed so it's not an option. If someone could also explain me this behaviour I will be very grateful.
Here's the link to my website. Remember that the problem is only in Chrome for Mobile.
I upload a screenshot of the problem.

Related

Is there a way to prevent a CSS Transition ending prematurely?

I have a transition set on an styled button, which is getting triggered on :active state. So it smoothly goes to a pressed state, then smoothly goes back to normal state.
My problem is that the transition animation seems to end prematurely, meaning even if transition-duration is 2s, it will last much shorter, especially on mobile device taps.
Meaning the animation works on touchpad taps (relatively long), or holding the button on mobile devices, but I want it to activate and last the full time, on both mouse clicks and mobile taps.
I saw somewhere on the net, that putting the :active state on the parent, then translating the child from the parent will fix the issue, but no success yet.
Here a web environment with my code -> https://stackblitz.com/edit/vitejs-vite-tx57pk?file=src/Button.jsx
And here's the code block itself ⬇️
import styled, { css } from 'styled-components';
export const Button = styled.button`
--easing: cubic-bezier(0.18, 0.89, 0.32, 1.28);
--bg-color: #ddd;
--shadow-color: grey;
width: 100%;
height: 5rem;
color: black;
outline-offset: 5px;
border: none;
text-transform: uppercase;
display: grid;
place-items: center;
font-family: inherit;
font-weight: 700;
touch-action: manipulation;
transition: all 0.5s var(--easing);
background-color: var(--bg-color);
border-radius: 15px;
font-size: 20px;
line-height: 25px;
letter-spacing: 1.25px;
box-shadow: 0px 8px 0px var(--shadow-color);
&:active {
transform: translateY(8px);
box-shadow: 0px 0px 0px var(--shadow-color);
}
`;

Border-Radius doesn't work in link button on Chrome

I have styled an oval button and it in an a element with the class .button
It works and looks great on firefox, but I get a rectangular button in Chrome, without a border. The link still works but the border and border-radius seems to be misunderstood.
This is the CSS:
a.orange-circle-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
box-shadow: 0 6px 9px 0 rgba(0,0,0,0.4);
border: .5em solid #00667e;
font-size: 1.2em;
text-transform: none;
text-align: center;
font-family: "lato", sans-serif;
line-height: 3em;
color: #ffffff;
background-color: #283f72;
margin: auto;
display: block;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-khtml-border-radius: 50%;
height: 4em;
width: 12em;
position: relative; }
Here is the HTML:
Current Stock
This is it in the wild: https://www.frontiercomputercorp.com/
I am assuming I've done something wrong with the border-radius that's unique to chrome, but I'm not skilled enough to know if it's being caused by the way I'm calling the class.
To recap: In firefox the button is oval (as I wanted)
In Chrome it is rectangular
HeLP!
Remove the following lines and it will be fixed:
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
I tested it in Chrome and it fixed the problem.
The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme.Therefore it overrides your border-radius code as Chrome natively doesn't set border-radius for the button. By not to adding appearance or setting it to none, you won't have this problem in Chrome too.
Just delete these lines below:
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
<a> is a clickable type of element. A hyper-link. display: block will do what you want here.
"The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme."
(I think they are still ugly, but that's not the point here :) )
Here's the CSS now:
a.oval-box{
box-shadow: 0 6px 9px 0 rgba(0,0,0,0.4);
border: .5em solid #00667e;
font-size: 1.2em;
text-transform: none;
text-align: center;
font-family: "lato", sans-serif;
line-height: 3em;
color: #ffffff;
background-color: #283f72;
margin: auto;
display: block;
border-radius: 50%;
-webkit-border-radius: 50%;
height: 4em;
width: 12em;
position: relative; }
a.oval-box:hover {
color:#ffffff;
background-color: #f00667e;
text-decoration: none;
border-color: #f89520;}
I started this with a button so I got stuck thinking button. But as you have pointed out, it's just a styled block and I don't need the button comand at all.
Thanks.

Internet Explorer CSS mirroring content?

I'm having an issue with css in Internet Explorer, however it is only showing when i'm testing in Browserstack. It shows on all versions of IE that I test on with Windows 7. On my PC it appears fine with my version of IE and when I change the browser mode from within. I'm not sure if it's a quirk or Browserstack or an IE issue that i'm missing.
The area concerned has 2 paragraph tags, 1 floated left the other right, both width 45%, display block, overflow hidden. Each has an anchor tag inside display block, with a background color and border on. The second link is like it's mirroring itself, looks really odd and i can't find anything on this, anyone seen this before and know how to fix? Or is it a Browserstack quirk?
Screenshot of what's happening here
Thanks!
edit, added code:
<style>
a.button {
background: #c10075;
-webkit-background-clip: padding-box;
color: white;
display: inline-block;
padding: 15px 0;
border-radius: 4px;
border: 2px solid #c10075;
border-bottom: 2px solid #8e0056;
border-right: 2px solid #8e0056;
text-transform: uppercase;
text-align: center;
font-family: Rokkitt, serif, Arial, Helvetica, sans-serif;
font-size: 28px;
display: block;
}
a.button:hover {
background: #8e0056;
border: 2px solid #8e0056;
color: white;
}
.cta-buttons p{
width: 45%;
float: left;
}
.cta-buttons p.last{
float: right;
}
</style>
<div class="container cta-buttons">
<p>
Apply now
</p>
<p class="last">
Book your visit
</p>
</div><!-- .cta-buttons -->

Why the input box is showing so different on iPad but not on chrome [duplicate]

This question already has answers here:
iOS forces rounded corners and glare on inputs
(6 answers)
Closed last month.
I have a site which is working properly except for the input field and submit button next to it. They are not showing properly on iPad. The height of the input box is slightly more than the submit button, making it look weird.
What I think is that Safari mobile has different viewports(1024px) etc, but renders the same WebKit appearance as of Chrome. Then why the input box is showing different on iPad?
Here is how it looks in Google Chrome on my desktop:
And here is how it looks on iPad:
The HTML part goes simply as:
<div id="search-form">
<input id="Search" class="defaultText defaultTextActive" title="search shzamm!" type="text" spellcheck="false">
<input onclick="javascript:someFunction();" type="button" value="Go" class="search_btn">
</div>
And the CSS for the same is:
#search-form {
overflow: auto;
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 26px;
}
input#Search {
-webkit-appearance: none;
border-radius: 0;
-webkit-border-radius: 0;
}
.defaultText {
width: 88%;
padding-left: 4px;
height: 29px;
float: left;
background-color: #f7f7f7;
border-right: 0px solid #666;
border-bottom: 1px solid #666;
border-color: #999;
margin-right: -33px;
}
.defaultTextActive {
color: #999;
font-style: italic;
font-size: 15px;
font-weight: normal;
}
.search_btn {
font-size: 13px;
font-weight: bold;
height: 34px;
cursor: pointer;
float: right;
margin: 0;
width: 33px;
background: url("../images/search.jpg") no-repeat;
text-indent: -99999px;
border: 1px solid #999;
border-top: 2px solid #000;
margin-top: 0px;
margin-right: 1px;
}
As you can see, the border effects of input are also not being rendered properly in iPad. Anyone have any clue about it?
This snippet of CSS will remove the default WebKit styling from your textboxes:
input[type="text"] {
-webkit-appearance : none;
border-radius : 0;
}
Works on iOS 7 too.
Try to use -webkit-appearance to get rid of the default styles.
Check this answer: iOS forces rounded corners and glare on inputs

Safari browser and CSS border-radius displaying straight line on right side

As you can see in the above screenshot, Safari Version 6.0.2 (8536.26.17) on a Macbook Air displays the border-radius on the right side with a straight line. The "button" is a link tag with a class applied to it. This same button displays properly in Chrome but not Safari. It's driving me crazy as to why this is happening.
JSFiddle link: http://jsfiddle.net/unnmv/
Here's the CSS I'm using:
background: $color;
border: 1px solid darken($color, 15%);
color: $text-color;
cursor: pointer;
display: inline-block;
font: 14px/100% Arial, Helvetica, sans-serif;
outline: none;
padding: 0.5em 2em;
text-align: center;
text-decoration: none;
width: auto;
height: auto;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
Here is what worked for me: Add the following to your css:
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
I noticed it is mentioned for spacing consistency issues between browser, so I tried it out with this issue since i was having the same. It worked for me.
Good luck!

Resources