Note this is not because the css is incorrect or because Safari doesn't support these rules, its not that type of problem. I can uncheck and check the rule in the inspector and it works.
Im using Vue with sass for my website. The css works fine on every other browser, but on safari, theres a few instances where some seemingly random css rules are not taking effect.
The first example is this button, that gets enabled when the input is checked.
The button currently has the disabled class
When I check it, it removes the disabled class, meaning the background-color will be green and the font color white, this is the result
As you can see the background-color changed, but the font remained black. even though it has been updated in the inspector. In the inspector if i check the color property off and on, it will update and be correct.
Im applying these styles in the standard sass way shown below
button {
border-radius: 4px;
cursor: pointer;
font-size: 16px;
padding: 8px 12px;
font-weight: bolder;
display: flex;
justify-content: center;
align-items: center;
background-color: $secondary-color;
border: 1px solid $med-light-grey;
color: $black;
&.disabled {
pointer-events: none;
cursor: not-allowed;
background-color: $light-grey;
border-color: $med-light-grey;
color: $off-black;
}
}
I apply it to the button like this
<button v-if="!loading" #click="initalise()" class="submit" :class="{ disabled: !agreed }">Start</button>
The class does apply and remove correctly in the inspector and the color updates on every other browser
Im on Safari Version 14.1, on a new private browser, no cache, storage or anything. I dont know what could be causing this.
Here is another example where it happens
The content class stretches to 100%. But when i resize the window, making it a little bigger, the div doesnt stretch with it, so theres a gap. The background stretches as it should, and the header above it too. If i just uncheck and check the display: grid rule, everything works as it should and I can resize freely and the div will follow.
Im not sure if this is a browser issue, or the way my website is built, here are the versions that im using
"node-sass": "^5.0.0",
"sass-loader": "^10.2.0",
"vue": "^2.6.14"
Any help would be appreciated
Going to answer my own question, this was the problem for the button
pointer-events: none;
the pointer events property seems to be bugged on Safari and it will stop the DOM updating the color rule. I have found this codepen that replicates the problem and will fix when removing it.
Im guessing the 2nd example I showed is doing the same sort of thing with another property, but its a problem on Safaris end, so for that I will just restructure the html and css.
[codepen][1]
Related
I have an email contact form, with a submit button, and some basic styling on the button. All of the styles work on Desktop, and most of the styles are applied on mobile, just not the padding or border-radius. I already tried switching to EM units instead of pixels. The url is http://sharperprogrammer.com/contact (not self-promoting, just thought it would help to see the full thing)
HTML:
<input type="submit">
CSS:
input[type=submit] {
background-color: #4CAF50;
color: white;
/* padding: 12px 20px; */
padding: 1.2em 2em;
border: none;
border-radius: 0.4em;
cursor: pointer;
margin: 10px;
}
I have even connected my iPhone to my Mac and opened the Safari Developer Tools, and I can check and uncheck to toggle different styles on the button, but the padding seems to do nothing. It's weird to me because the other styles like the background-color work fine, so I know everything is connected at least. Thanks for taking a look!
Edit: The style is just fine on an Android phone's Chrome browser, but the styling isn't applied correctly on my iPhone's Chrome or Safari browser. And I've cleared my browser cache just in case.
Here is a screenshot:
It looks to me like Safari / Chrome Mobile have some default button styles that are more specific than input [type=submit]. Perhaps the more specific styles don't specify background-color which is why yours is working.
I found two solutions, which I will link below, that both vouch for adding -webkit-appearance: none; as a solution.
CSS submit button weird rendering on iPad/iPhone
Why is my button style changing when on laptop and mobile
Hopefully this will work for you :)
Try to add this:
in the navbar.css file inside media query :
#media only screen and (max-width: 600px) {
.navbar{
flex-direction: column;
align-items: center;
}
}
I have a style for inputs on my page, with some basic padding and font size, I tried applying the same style to a link, but for some reason the link is always larger (height) than the button no matter what I do, even with the exact same text and font size, I tried doing display: block but that just makes the button the width of the screen.
Here is the CSS:
.button{
padding: 10px 15px 7px 15px!important;
font-size: 16px !important;
color: white;
cursor: pointer;
border-radius: 2px;
text-decoration: none;
}
.button-3{
background-color: #ff4d4d;
border: 1px solid #ff4d4d !important;
}
I've looked at the Chrome styles panel and confirmed the font / padding is being used (it's not strikken through).
Here is what it looks like:
Looks like the issue is because:
You aren't using a CSS reset.
The line-height needs to be the same.
Make sure you give a consistent line-height to both. For now, set in the both:
line-height: 1.5;
This should fix it. Also, you can compare both the styles with the computed ones, to check if there's anything else being set. Since you say <button>, it might also have some border.
Also, like I guessed, you are also giving border and same colour as background to the button, making it look 2px bigger.
When you open the Developer Tools, try comparing the Computed Styles part:
To avoid this kind of stuff I always set the font family I used.
Take a look at this example: https://fiddle.jshell.net/tnr0jxka/
You also might want to consider adding:-webkit-apperance:none;-moz-apperance:none; to this kind of css, it will save you big time in cross-browser experience.
Buttons do not inherit the global styling automatically.
So, setting font-size of button explicitly will solve the problem
see this solution for more info
http://codepen.io/anon/pen/KwKOaz
Changing only the background-color significantly changes the style on a button element, specifically the border style.
This happens on chrome, safari, and firefox on a Mac. Why does this happen? How can I safely change its background color?
Browser vendors apply custom styling to UI elements like buttons and input fields. Altering one of these overwritten attributes results in disabling all of the other vendor styles on that element as well. If you want to change one attribute, you have to alter the others as well, I'm afraid.
Unfortunately I can't tell you why they do this - probably there is might be some spec behind, but I cannot find any evidence for that.
When all the styles are untouched, the browser uses the host OS's given API to render the given control. This will make the control look native to the platform, but if you apply any style to that control/element, the browser cannot guarantee that the given style can be applied in the given platform, so it defaults back to a simplified, fully css solution.
Also note, that styling control elements, though works, not covered by stable standards yet.
For example, the NSButton (native control behind the button in OS X) doesn't have an option to set the background color, so the browser faces an impossible task. On Windows, you can change the background color, this is why people report not seeing your issue on Windows.
Sometimes CSS styles are inherited. However, you are applying styles to your body which is everything in HTML. Personally I don't apply anything to body other than maybe reset or normalize CSS. That said, you can use CSS selector operators and\or id/classes to minimize:
http://www.w3schools.com/cssref/css_selectors.asp
Example:
html
btw don't write html like this just easier to read
<body>
<div class="wrapper">
<button class="all-btns red">
Cancel
</button>
<button class="all-btns green">
Save
</button>
</div>
</body>
css
.div.wrapper {
width: 100%;
height: auto;
background: #efefef;
}
.all-btns {
border: solid 1px #000;
width: 50px;
line-height: 48px;
height 35px;
color: #fff;
}
.btn.red {
color: #fff;
background: red;
}
.btn.green {
background: green;
}
On a project using jQuery UI and jQx, we are applying to all form fields the user selected theme and came across this problem :
When selecting text in input (text) fields, the background color is not the same across browsers. I know that this is browser / OS specific, however it leads to this oddity :
Chrome
IE 8 and 9
As you can see, the selected text in IE may cause problems as the selection background color blends with the rest of the element. (Why IE has this color set to white is beyond me.)
I have tried the "changing text selection color" CSS trick, but it works everywhere else than what I'm trying to change.
Is there some voodoo magic or some other poorly documented feature that can make IE behave less like... how it behaves? (And hope that IE10 really sucks less.)
Even though this question is very old I'm answering here to save anyone else trying to resolve this thinking it isn't possible. We were ready to give up and just accept this behaviour from Internet Explorer when we stumbled on the answer accidentally.
It seems that Internet Explorer uses this highlight method for selected text in any textbox that has the color set in its style - if you remove this attribute the highlighting works normally.
We stumbled accross the answer when we moved the color attribute into its own class and applied both classes to the textbox.
The following will exhibit this text selection highlighting in IE:
<input type="text" id="uiSizeWidth" class="SizeInput">
.SizeInput {
width: 70px;
text-align: center;
height: 30px;
font-weight: bold;
margin: 2px;
color: #ef4915;
}
But this will not:
<input type="text" id="uiSizeWidth" class="SizeInput InputColor">
.SizeInput {
width: 70px;
text-align: center;
height: 30px;
font-weight: bold;
margin: 2px;
}
.InputColor {
color: #ef4915;
}
You can then use the following CSS to style the highlighting to whatever:
::-moz-selection {
color: #fff;
background: #39f;
}
I have been pulling my hair out trying to get Chrome to style my search input with a background image. Firefox has no problem, but I fear it's because it treats the input as a regular text input. Is this simply not possible?
Try this as a demo:
<input type="search" />
input[type="search"] {
background: transparent
url(http://google.com/intl/en_ALL/images/srpr/logo1w.png) no-repeat 0 0;
}
If it worked correctly, it should put Google's logo (or part of it) as the background image for the "Search" input. But as you will see when you look at this in Chrome, it DOES NOT WORK. Any ideas, or is this just one of HTML5's quirks? :\
You can get Chrome (and Safari) to play along better with your styles on an HTML5 search field (including background images) if you apply this in your CSS:
-webkit-appearance: none;
You may also want to change -webkit-box-sizing to...
-webkit-box-sizing: content-box;
...since it appears that Webkit defaults this to the border-box value (basically the old IE5 box model).
Be warned, there's still no (apparent) way to have any effect on the position/appearance of the field-clearing button, and since only Webkit generates that button, you may find some new cross-browser annoyances to deal with.
Complete solution to remove all extra design caused by browser. This will change the search field to normal input field
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
input[type="search"]{
-webkit-appearance: none;
-webkit-box-sizing: content-box;
outline:none;
}
Like you said, Mozilla treats search inputs as text. For Webkit browsers however (Chrome, Safari), the search input is styled as a client created HTML wrapper for the internal Webcore Cocoa NSSearchField. This is what gives it the round edges and the 'x' button to clear itself when there is text within it. Unfortunately it seems that not only are these extra features inaccessible by CSS/JS for the time being, but it also seems that there's no W3 specification for what CSS properties can be applied to this element as well as other new HTML5 elements. Until there is such a specification I wouldn't expect to have consistent behavior.
The cancel button can be styled with the following
input[type="search"]::-webkit-search-cancel-button {
/* Remove default */
-webkit-appearance: none;
/* Now your own custom styles */
height: 10px;
width: 10px;
background: red;
/* Will place small red box on the right of input (positioning carries over) */
}
Styling can be removed using
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
http://css-tricks.com/7261-webkit-html5-search-inputs/