I have button which is <a> element with href, which doesnt have any background set on :active/:focus/:visited, but on force/3dTouch tap it gets this weird #b8b8bc background under the text only (while <a> doesnt have any children e.g. <span> etc so I suppose this is the text node highlight).
here's the gif to illustrate the behavior.
I've tried adding -webkit-tap-highlight-color: transparent but it changes only regular tap color, not the forced/3d one
also I thought maybe that's selection color (as I can reproduce this on various websites) so tried to use selection selectors which didn't help as well
::selection {
background: transparent;
}
::-webkit-selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
Any ideas about possible origin of this?
Good job digging up.
I had the same issue plus another one and here are my solutions.
Post is old but someone could find it useful like me today.
First of all, the forced background was covering my link text totally because I was using user-select: none; on my header links.
So that's something to check, just in case.
Regarding the background color, Force Touch doesn't use the link parent element background but the one that's under it.
If you want to "feel it", we could say that Forced Touch digs into the direct parent background and let the under layer appears.
So, to counter that without having to touch to background color, I use some z-index in the parent element to elevate it, preventing Forced Touch to "dig" :)
So if your links parent element is named card, you can add to your CSS:
.card {
isolation: isolate;
z-index:1;
}
Now, Force Touch will use the parent background color as we want to.
Okay so I found sort of "solution" based on parent's color.
Try to set *{background: red}.
If worked try set same on few parents .parent1 { background: pink}, .parent2 { background: lightblue}, .parent1 { background: salmon} etc.
In my case I found the color applied to force touched text was menu wrapper's background that takes most of the screen when menu is opened.
Side effect of this change - all forcetouched elements will have same color, no option to specify :hover or :active colors (you can see the color is slightly different on the 1st click) and ALL links will have same background:
I imagine you can try setting wrapper's background via JS based on what is clicked. Not sure if that will work. see docs here:
WebKit DOM Programming Topics
So far this seems to me too fragile to touch and I would not recommend doing this. Though you can change this color I've decided to let OS do what it wants here.
Related
I'm using CSS to ease-in-out some text when a particular psudeo:element is hovered.
The code below is selecting the parent of the .description element I want to show on hover, however the hover effect is happening before I want it to.
.grid-item:hover .description {
visibility: visible;
opacity: 1;
}
When the cursor is a few centimetres above the parent element, the hover state is triggered. I believe this may be a problem with the padding/margins of this element. I've tried many things with no luck.
Here is the full code.
Gently hover a little bit over each image to understand the problem.
You just need to change the CSS selector that shows the text on hover. At the moment, it is triggered when the parent of .image (i.e. .grid-item) is hovered. Instead, if you set it as follows, it will be triggered when the div containing the image is hovered.
.image:hover + .description {
visibility: visible;
opacity: 1;
}
Here's the updated pen: https://codepen.io/anon/pen/WEWmEw?editors=1100
#Jordan Miguel, you're right. It's the padding, as well as the content itself.
If you crack open the dev tools for the browser of you choice (I'm using Chrome's in the picture), you can probably find a tool that will show the box model for a particular CSS element. When selecting your element, you can see the padding on the right and left side that trigger hover.
On the left hand pane of the tools, you can see the element selected as well as the stylings that have been applied. From here you can figure out what you'll need to change in order to get the behavior you expect.
I have 4 overlays inside a container (overflow: hidden) translated horizontally 100% on default.
.active on the .overlay animates it into view.
activating another one removes .active from the current one and adds .active to the new one.
Now I want a transition delay on the "new active" element, because animating both the old and the new overlay at once results in inconsistent visuals (overlays overlaying each other etc.). And both animating simultaneously feels too hasty.
My first approach:
sibling selector to delay the transition for all siblings of the .active, didn't work out, since the sibling selector doesn't look "behind" or "around" ...
Second approach:
class on parent atLeastOneIsActive and then apply transition-delay to .active. Didn't work aswell, because both the new and the old overlay then get a transition-delay, making all even worse.
Unfortunately I can't show you the live example.
The question is more in general anyways; but to get a picture of the result here 2 screenshots
hover on either pin or link
overlay displayed
I'm looking for a clean and sweet way to apply delays in certain situations.
jQuery is only used for class management.
activating another one removes .active from the current one and adds .active to the new one.
Is this "activation" made with jQuery .on("mouseover", function(){?
Because if you add and remove classes this way, why not simply use setTimeout on the .addClass()?
-------------------------
EDIT
I worked on it a while.
And I'm pretty sure to have a solution...
Let's say I found the exact nature of you specific problem, to be more exact.
I reproduced your problem and the solution in a fiddle.
But before you have a look to it, please read my explanations:
The image transitions are overlapping.
And that is because of their width versus their animation start position.
Since they are pushed to outer right of the viewport at a specific distance...
This distance is not enought versus the with of the images. It has to be twice (minimum) the larger image.
I found it by setting them all to a same size.
This is not mandatory... But sure is a good thing!
So, the solution is to push them twice this "max-width" away from the right side of the viewport.
I made a Fiddle and made 4 buttons (representing your map pins) to animate the images. I also assigned keyboard numbers to them, so it's easyer to closely watch the images without having to target the buttons with the mouse. ;)
And finally, there is a button "Toggle class equalSize" which forces the images to all the same size.
Have a look now!
:D
.active {
right:0;
}
img{
position:fixed;
right:-1200px;
top:100px;
transition: right 2s;
}
.equalSize{
width:600px;
height:450px;
}
I've been looking for a way to easily style checkboxes even in those cases where I don't have labels but I haven't found any answer that completely satisfied me so I decided to try and find a way by myself so that all the others might find it useful.
This is what I ended up with.
CSS Checkbox without label
What I do is basically style the after elements and set pointer-events to none so you'll be able to click true the after element.
This allows us to let the checkbox handle the click and change its state from checked to unchecked and we'll then style the after element depending on the checkbox state.
This will be the unchecked style
.check:after{
pointer-events: none;
background: white;
content: ...
....
}
And then we'll have our checked style
.check:checked:after{
background: green; /* Change background and maybe image */
....
}
Please notice that the original checkbox will be still visible under the after element since we can't hide it (hiding it will end up hiding after and before elements too) so you can't play with transparency on your after element but you can still play with background image position and background color as I did in the example.
I hope this will help you with your styles! :)
I have an issue where, ocassionally, when I set a background image on an HTML element it displays a completely random image that is also set as a background image elsewhere on the page.
For example, I have a list item that has a background image "myimage-abc.jpg".
I also have a div with a background image of "myimage-123.jpg". Everything is as expected for most people however for some Apple users (of which my Managing Director is one) the image "myimage-123.jpg" shows up on the list item as well as the div.
Has anyone else had this issue before? Any ideas how to get around it?
Thanks
Use inspect element on the element with incorrect background image and see which CSS selectors are overriding the background image that you want to have.
Then report back with the CSS selectors responsible for styling the elements in here. Keep in mind that CSS selectors are very particular about the way in which you use them.
Until then here's something that could be causing your problem, without my knowing your current CSS state.
From an answer on another question:
I've dealt with this before and it's always a strange issue. So here are some thoughts and examples of CSS behavior.
In CSS we have a hierarchy decided both on how you select an element and on its position within your stylesheet. Take for example the following CSS selectors:
body .test-parent .test-child {
color: red;
}
body .test-parent .test-child {
color: blue;
}
The result in this case would return color: blue; as the final style as it is the last read declaration for that elements color value.
However if we declare the following:
body .test-parent-two .test-child-two {
color: red;
}
body .test-child-two {
color: blue;
}
Then the final value is color: red;. This caught me off guard and it took me a while to notice the pattern and fix.
The problem here lies in the selectors. A more in-depth selector (longer / includes more in-between children) will override any others as can be seen by this JSFiddle.
Hope that also helps!
I have a button that, when hovered over, I would like the background image to display also. (It is an arrow an explanation of the button). There are quite a few questions similar, but I couldn't quite tweak the answers to work for me.
The HTML looks like
<div id="header_feedback">
<a href="#contactForm">
<img title="Add an Event" src="./img/header_feedback.png" alt="Give us your Feedback"/>
</a>
</div>
the CSS then is
#header_feedback
{margin-left:730px;
margin-top:-135px;
position:absolute;}
#header_feedback:hover
{
background: url ('./img/addevent_tip.png');
}
Any ideas hugely welcome!
The main problem here is not with your CSS. Itagi's answer correctly identified the minor issue that you can't have a space between url and the parens/address.
But there are two other bigger issues:
Invalid image url: when applied, background: url('./img/addevent_tip.png'); fails to find a valid image. To fix this, you either need two periods or zero. So either background: url('/img/addevent_tip.png'); or background: url('../img/addevent_tip.png');
Backgrounds applied to opaque images aren't visible: Since the entire content of the div is an image and that image has no transparency, you will not be able to see the on-hover change even when it happens correctly. You can adjust for this by making part of the image transparent (and, perhaps, setting a background for the non-hover state that leads it to look the way it normally does), or by abandoning the image in favor of CSS spriting.
you just need to change it the following way:
#header_feedback:hover
{
background: url('./img/addevent_tip.png');
}
no whitespace between 'url' and the actual url
#header_feedback a img{ display:none;}
#header_feedback a:hover img{display:block}