Change -webkit-tap-highlight-color to transparent - css

I've added the -webkit-tap-highlight-color: rgba(0, 0, 0, 0); to my CSS on the following website: http://www.aanzet.eu
Still on the iphone the problem occurs with a flashing pink color when I click on links.
Have search StackExchange but didn't find a solution for my problem. Could somebody help me please?

try both selectors:
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;

Related

Solution for CSS Border iOS appearance issue?

I recently added the following code to one of my text elements to add a cool underline to it:
border-bottom: 2px solid transparent!important;
border-image: linear-gradient(0.25turn, rgb(0, 0, 0), rgb(255, 0, 0), rgb(255, 204, 0));
border-image-slice: 1;
width: fit-content!important;
It looks like this on chrome and Android:
live picture here
However, on iOS devices the border completely surrounds the whole text and looks like this:
iOS live picture here
I tried some -webkit and -moz-fit-content type of things but since I am not actively in programming I did not get it to work.
I hope someone can help with this problem and I appreciate your solutions!
Best regards!
In your border-image-slice, give it precision and it will be ok :)
I've tested it and it works on Safari v 13.1.2
Aurélie
p {
border-bottom: 2px solid transparent!important;
border-image: linear-gradient(0.25turn, rgb(0, 0, 0), rgb(255, 0, 0), rgb(255, 204, 0));
border-image-slice: 0 0 1 0;
width: fit-content!important;
}
<p>Biscuit cake sweet roll. Carrot cake caramels</p>

CSS mask-image with linear gradient not working in Edge

Caniuse.com says that Edge has full support for mask-image but the following code is working in all browsers for me except Edge.
width: 200px;
height: 200px;
background: red;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
This should produce a simple red box which is red a the top and transparent at the bottom. Tested in Chrome and Firefox with no problems.
So, is it just incompatible with linear-gradient? I have scoured the web but can't find an answer.
Here is my testing code.
#masked {
width: 200px;
height: 200px;
background: red;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
<div id="masked"></div>
I've found that if I do not add -webkit-mask-image, when running on Chrome, there will be no transparent at the bottom.
But it always works well on Edge.
My version is Microsoft Edge 44.17763.1.0,Microsoft EdgeHTML 18.17763.
According to Can I Use, mask-image is supported in Edge 18, but is hidden behind a flag in lower versions.
Couple additional things:
If you're doing this on a picture element you need to add it on the img and not the containing picture.
Even in 2022 you still need -webkit-mask-image. Preprocessors should add this though.
If you have been using custom properties such as --theme-color: red make sure you only add a single dash for -webkit and not the double dash my stupid brain automatically entered for me today.

Invalid Property Value for RGBA background in Chrome

I see this question has been asked twice before, but both solutions had to do with removing spacing. Without any spacing in between rgba and (, my issue still seems to persist. My CSS code is:
background: rbga(255,255,255,.7);
I've also tried:
background-color: rbga(255,255,255,.7);
In Chrome, both of these register as an Invalid property value.
However, if I use:
background-color: white;
opacity: .7;
The above code does work. Any reason why the rgba code is not working?
Please try with
rgba(255,255,255,.7);
Your Spelling is incorrect
hello you have typo background-color: rgba(255, 255, 255, .1);
and you tried background-color: rBga(255,255,255,.7);

Gray in navbar, can't find CSS to remove

I am working on a new theme for a wordpress site, http://hanahanpolice.com/test/ when I hover over the items the background is gray on some. This only happens when I am on the main page (/test) any other page I do not see the gray. I can not find where this color is coming from. Can anyone help?
Look for this class:
.front-page .menu .current_page_item a {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
filter: none;
}
And remove:
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
In your style.css at line 1308 remove background from this class:
.front-page .menu .current_page_item a{
}
And btw, you can always use for problems like this FireBug for Firefox or with IE developer tools - just press F12.

How to remove webkit tap highlight border only?

If you don't like webkit to highlighting links when tapping them, you can remove that effect with:
-webkit-tap-highlight-color: rgb(0, 0, 0, 0);
Actually I want this effect, but not the extra border added around the tapped element.
Is there a way to remove highlight border only?
If you are talking about that orange borders around inputs on focus, you might want to try to add outline:none; to your CSS properties.
Like so :
input { outline:none; }
a is missing
should be -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

Resources