Webkit Bug with ':Hover' and Multiple Adjacent-Sibling Selectors

Webkit bug with `:hover` and multiple adjacent-sibling selectors

you can overcome Webkit's pseudo classes + general/adjacent sibling selectors bugs by faking animation on the body element:

body { -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix {
from { padding: 0; }
to { padding: 0; }
}

you can check it out here: http://jsfiddle.net/jalbertbowdenii/ds2yY/1/

CSS chaining adjacent sibling with :checked not working

I think you have the same issue as described here:

Webkit bug with `:hover` and multiple adjacent-sibling selectors

As a workaround just add :checked ~ p {} (intentionally empty) and it works:

http://jsbin.com/abeniy/7/edit

Why does the general-sibling combinator allow toggling pseudo-element's content, but not the adjacent-sibling?

This is a long-standing bug in WebKit browsers related to the use of certain dynamic pseudo-classes with next-sibling combinators. This happens whether you're applying styles to the sibling element itself or a pseudo-element of that sibling element.

I don't know if anybody has filed a bug report yet, but this has been seen rather frequently on the site:

  • Webkit bug with `:hover` and multiple adjacent-sibling selectors
  • CSS adjacent sibling selectors, Safari and <nav> elements

Strangely it was also reported that Chrome had issues with the general sibling combinator, but as you note it works in your given scenario:

  • Why doesn't this CSS selector work: a:hover ~ span?

So either that was fixed, or something else triggers/triggered it.

Safari 7.1 CSS Problems with sibling selector

This is a known bug in Safari (unsure about Safari 8) and older versions of Chrome. There are several workarounds but the one I've used in practice is just replacing + with the ~ combinator:

.checkbox input[type="checkbox"]:checked ~ input ~ label::after

Also here are other questions addressing the same bug:

  • Webkit bug with `:hover` and multiple adjacent-sibling selectors
  • CSS adjacent sibling selectors, Safari and <nav> elements

How to prevent sticky hover effects for buttons on touch devices

Since this part of CSS Media Queries Level 4 has now been widely implemented since 2018, you can use this:

@media (hover: hover) {
button:hover {
background-color: blue;
}
}

Or in English: "If the browser supports proper/true/real/non-emulated hovering (e.g. has a mouse-like primary input device), then apply this style when buttons are hovered over."

For browsers that do not have this implemented (or didn't at the time of this original answer), I wrote a polyfill to deal with this. Using it, you can transform the above futuristic CSS into:

html.my-true-hover button:hover {
background-color: blue;
}

(A variation on the .no-touch technique) And then using some client-side JavaScript from the same polyfill that detects support for hovering, you can toggle the presence of the my-true-hover class accordingly:

$(document).on('mq4hsChange', function (e) {
$(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});

CSS - Sibling selector not working in android?

http://quirksmode.org/css/selectors/mobile.html

The sibling selector is supported

the :checked pseudo-class is not

Chaining adjacent sibling operator in CSS

Works fine for me and is standard, as far as I know. (Have never seen anything to the contrary)

Example: http://jsfiddle.net/6ykxB/

If it were just utilizing the last adjacent selector, this would still work

.z + .b + .c

but it doesn't

Example2: http://jsfiddle.net/6ykxB/1/

A reference on SitePoint mentions multiple adjacent sibling selectors, a further confirmation that they are standard:

http://reference.sitepoint.com/css/adjacentsiblingselector

However, there is a warning for elements with :hover and multiple selectors:

Safari (up to and including version 4) and Chrome (up to and including
version 3) behave “buggily” when the adjacent selector is preceded by
an element using the :hover pseudo class. The bug varies between
versions but the rule is either not applied at all, or applied
inconsistently.

Inline elements shifting when made bold on hover

Pre-set the width by using an invisible pseudo-element which has the same content and styling as the parent hover style. Use a data attribute, like title, as the source for content.

li {
display: inline-block;
font-size: 0;
}

li a {
display:inline-block;
text-align:center;
font: normal 16px Arial;
text-transform: uppercase;
}

a:hover {
font-weight:bold;
}

/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
display: block;
content: attr(title);
font-weight: bold;
height: 0;
overflow: hidden;
visibility: hidden;
}
<ul>
<li><a href="#" title="height">height</a></li>
<li><a href="#" title="icon">icon</a></li>
<li><a href="#" title="left">left</a></li>
<li><a href="#" title="letter-spacing">letter-spacing</a></li>
<li><a href="#" title="line-height">line-height</a></li>
</ul>


Related Topics



Leave a reply



Submit