CSS Attribute Selector + Descendant Gives a Bug in Webkit

CSS attribute selector + descendant gives a bug in Webkit?

The first jsFiddle is broken in my Chrome 12.0.742.112 (stable).

However, it works in my Chrome 14.0.803.0 dev-m.

So, they're already aware of and have fixed the bug. You just have to wait for the fix to land in the stable channel.

I'll try to find a link to a bug report, if one exists.

Why will Webkit not repaint my webpage properly?

It's all a bit complicated, so I'm not completely sure, but with selectors like this:

input[data-valid="true"]+div.indicator

I think you're suffering from the same bug as discussed in this question:

CSS attribute selector + descendant gives a bug in Webkit?

@DADU, the owner of that question, has already filed a bug report, but nothing seems to have come of it yet.

Why will Webkit not repaint my webpage properly?

It's all a bit complicated, so I'm not completely sure, but with selectors like this:

input[data-valid="true"]+div.indicator

I think you're suffering from the same bug as discussed in this question:

CSS attribute selector + descendant gives a bug in Webkit?

@DADU, the owner of that question, has already filed a bug report, but nothing seems to have come of it yet.

:not() selector not behaving the same between Safari and Chrome/Firefox

Safari recently shipped the level 4 version of :not(), which allows complex selectors for arguments, putting it on par with jQuery's hitherto non-standard implementation. See the release notes. The current incarnation of :not() only allows a single simple selector for an argument, so a complex selector like p div will not work in today's browsers by design.

A complex selector is an expression consisting of one or more compound selectors separated by combinators such as descendant, >, ~ and +. A compound selector is a sequence of one or more simple selectors. div is a compound selector consisting of one simple selector, and p div is a complex selector consisting of two compound selectors (each of which consists of one simple selector), separated by a descendant combinator.

It is currently not known when this will land in the other browsers, though it's unlikely the new specification of :not() will change at this point — the current level 4 definition is a no-brainer and if the original WebKit strain is daring enough to implement it, then it's really only a matter of time before it makes its way into the other strains (including Blink).

After almost five grueling years of waiting since the FPWD, we might actually finally get to see a CR of selectors-4 real soon. Consider me pumped.

User-select: all inheritance not working in chrome 62

It is an issue on the Chrome browser. The bug was already reported. You can find more details about the bug with another (not working example) on this bug report.

---

Until the bug is fixed you have the possibility to use some JavaScript to get the behavior. See this answer on StackOverflow.

---

Another non JavaScript solution would be the following:

.parent :not(.selectable-all) {  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;}.selectable-all {  -webkit-user-select: all;  -moz-user-select: all;  -ms-user-select: all;  user-select: all;}

<div class="parent">  <span>user-select set to none and not selectable all.</span>  <div class="child selectable-all">    Parent has user-select set to none, Try to select this text  </div></div>
<div class="child selectable-all">  No parent, Try to select this text</div>

How can I force WebKit to redraw/repaint to propagate style changes?

I found some complicated suggestions and many simple ones that didn’t work, but a comment to one of them by Vasil Dinkov provided a simple solution to force a redraw/repaint that works just fine:

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';

I’ll let someone else comment if it works for styles other than “block”.

Thanks, Vasil!

CSS3 property webkit-overflow-scrolling:touch ERROR

As @relluf pointed out, applying 3D transitions on the relative element fixes the bug. However, I investigated it a bit further and it seems that applying -webkit-transform: translateZ(0px) works too (this is what Google does on gmaps map container) and it does not need to be on the relatively positioned element, just the direct descendant of the scrollable element.

So if you don't want to manually keep a list of all the places where the fix is needed, you just might do:

element {
    -webkit-overflow-scrolling: touch;
}

element > * {
    -webkit-transform: translateZ(0px);
}

---

Related Topics