New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 594405 link

Starred by 1 user

Issue metadata

Status: Duplicate
Merged: issue 582301
Owner:
NOT IN USE
Closed: Mar 2016
Cc:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

-webkit-slider-thumb no longer displays CSS :after content property

Reported by bianch...@gmail.com, Mar 13 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

Example URL:
https://dev2.verbol.com/chromebug.html?verbol=raw

Steps to reproduce the problem:
::-webkit-slider-thumb:after { content: 'hello'; } is no longer a valid CSS rule as of Chrome 49.

Here is a simple example that uses the above CSS.

<!DOCTYPE html>
<html>
<head>
<style>

#myr {
    -webkit-appearance: none;
    width: 100%;
    height: 0 !important;
    margin: 0;
}

#myr::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 30px;
    width: 80px;
    line-height: 30px;
    border-radius: 15px;
    background: blue;
    font-size: 21px;
    text-align: center;
    color: white;
}

#myr::-webkit-slider-runnable-track {
    background: yellow;
    height: 30px;

}

#myr::-webkit-slider-thumb:after {
    content: "hello";
}
</style>
</head>
<body>

<input id="myr" type="range" />

</body>
</html>

What is the expected behavior?
In this particular example, I would expect to see the word "hello" inside the slider thumb.

What went wrong?
::-webkit-slider-thumb:after { content: 'hello'; } used to display the word "hello" in the slider thumb.  On Chrome 48, the above URL shows this to work.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? Yes Chrome v48

Does this work in other browsers? N/A 

Chrome version: 49.0.2623.87  Channel: stable
OS Version: OS X 10.11.1
Flash Version: Shockwave Flash 21.0 r0

I realize that webkit-slider-thumb was a non-standard pseudo-element but I can't find any mention of change support for it in the Chrome 49 release notes.  

The reason this was useful before was that the :after {content: 'xxx' } property could be used dynamically to display the selected value of the range.
 
Cc: timloh@chromium.org rnimmagadda@chromium.org
Labels: -Type-Compat M-50 OS-Linux OS-Windows Type-Bug-Regression
Owner: r...@opera.com
Status: Assigned (was: Unconfirmed)
====================================

Good Build:

49.0.2618.0    Base Position: 368523


Bad Build:

49.0.2623.0    Base Position: 369907

=====================================

Able to repro this issue on Windows 7, MAC (10.11.3) & Ubuntu Trusty (14.04) for the Google Chrome Stable Version - 49.0.2623.87

This is a regression issue broken in M49, below mentioned is the bisect info:

CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/edd8b00aa013ef2495fcf8d52e4ceb9858ba9eef..066021ea9e12b9a87e9497a1423a0de52c0a4061

Suspecting Commit: d525c3859d9fe0624112f3c1c753ee2207bee121	

Review URL: https://codereview.chromium.org/1587643004

@rune: Could you please look into the issue, and if it has nothing to do with your changes and if possible please do assign it to the concerned owner.

Thank you.

Comment 2 by timloh@chromium.org, Mar 14 2016

Mergedinto: 582301
Status: Duplicate (was: Assigned)

Sign in to add a comment