Closed
Description
Bug, feature request, or proposal:
Bug
What is the expected behavior?
The input element should not use the default background colour
What is the current behavior?
On Safari (10.1.1 (12603.2.4)) the input background remains default
What are the steps to reproduce?
see image
HTML:
<div class="mh-search-box" fxFlex>
<md-input-container floatPlaceholder="never">
<md-icon mdPrefix>search</md-icon>
<input mdInput
type="search"
[mdAutocomplete]="auto"
[formControl]="itemCtrl"
(keyup)="search(term.value)"
(clear)="toggleVisibility()" #term>
</md-input-container>
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let item of items | async"
[value]="item"
class="item"
(click)="resultClicked(item)">
<img src="{{item.icon}}" alt="...">
<span class="text">{{ item.text }}</span>
</md-option>
</md-autocomplete>
</div>
SCSS
md-input-container {
width: 95%;
/deep/ {
.mat-input-wrapper {
padding: 0 !important;
}
.mat-input-flex {
background: rgba(0, 0, 0, 0.22);
border-radius: 2px;
padding: 6px;
}
.mat-input-infix {
border-top-width: 0 !important;
}
.mat-input-placeholder-wrapper {
top: -.75375em !important;
}
.mat-input-placeholder {
color: rgba(255,255,255,.38) !important;
}
.mat-input-underline {
display: none;
}
}
md-icon {
padding-right: 10px;
}
}
What is the use-case or motivation for changing an existing behavior?
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
@angular/cli: 1.1.0
node: 8.0.0
TS. 2.3.4
os: darwin x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/material: 2.0.0-beta.6-1f93cdb
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.1.0
@angular/compiler-cli: 4.1.3
@angular/platform-server: 4.1.3
Happens only on: Safari (v. 10.1.1 (12603.2.4))
Is there anything else we should know?
The issue appears also with a less involved styling. so it should not be dependent on that.