Placholders in relative/absolute positioned inputs with opacity<1 are not visible

Fixed Issue #3901363

Details

Created
Aug 5, 2015
Privacy
This issue is public.
Reports
Reported by 8 people

Sign in to watch or report this issue.

Steps to reproduce

URL:
Fails in Edge: http://jsfiddle.net/wzmb7enL/
Works in Edge http://jsfiddle.net/wzmb7enL/1/

Repro Steps:

Load http://jsfiddle.net/wzmb7enL/ or build a page using the following.

Render the following html in edge:

<!DOCTYPE html>
<html>
<head><title>

</title>
<body>
<!-- the combination of position relative and -webkit-input-placeholder opacity
will remove a placeholder -->
<style>
input::-webkit-input-placeholder {
opacity: 0.9;
}

    div {
        position: relative
    }
</style>
<div>
    <input placeholder="show something" />
</div>

</body>
</html>

Expected Results:

Input placeholders are visible

Actual Results:

Dev Channel specific:

No

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Sermet I.”

      Changed Assigned To to “Amit J.”

      Changed Assigned To to “Rossen A.”

      Changed Assigned To from “Rossen A.” to “Peter S.”

      Changed Status to “Confirmed”

      Changed Title from “Microsoft Edge placeholder bug” to “Placholders in relative/absolute positioned inputs with opacity < 1 are not visible”

      Changed Title from “Placholders in relative/absolute positioned inputs with opacity < 1 are not visible” to “Placholders in relative/absolute positioned inputs with opacity<1 are not visible”

      Changed Assigned To from “Peter S.” to “IE S.”

      Changed Status from “Confirmed” to “Fixed”

    • I created a Microsoft account specifically to comment on this bug. It was reported in April of 2015 and closed at https://connect.microsoft.com/IE/feedback/details/1627778/microsoft-edge-placeholder-bug, saying it was moved here. Apparently no steps have been taken to resolve this since.

      The only fix I’ve found is to browser sniff in JS and add a class to the body, then set the placeholder value to opacity: 1. Come on…

    • Why this is marked as fixed?

      On Edge placeholder still doesn’t show.

      On IE it shows normally.

    • Agreed, this is not fixed in Edge.

    • Non yet fixed in Edge.

    • Same here, issue still persists.

    • It worked for me!!!
      This article really solved my problem.

      Thanks :)

    • For those of you still having issues make sure that you’re not using something like normalize.

      If you are, it includes this:

      /**
       * Correct the text style of placeholders in Chrome, Edge, and Safari.
       */
      
      ::-webkit-input-placeholder {
        color: inherit;
        opacity: 0.54;
      }
      

      If you remove the opacity it will fix the issue.

      If you’re using some other reset just make sure the ::-webkit-input-placeholder property is not present with an opacity value.

    • Edge is still experiencing this issue. I cannot have an opacity on a placeholder.

    • Hello,

      Thank you for providing this information about the issue. We are pleased to report this feature is fixed in Edge 15063 and is available in our latest Creator’s Update build.

      Best Wishes,
      The MS Edge Team

    You need to sign in to your Microsoft account to add a comment.

    Sign in