The following is causing rendering problems on select boxes in CKEditor dialog forms. This was tested on a select. Not sure of problems with other elements, though a quick look through the CSS it appears this might be select only:
@media screen and (-webkit-min-device-pixel-ratio: 0) {
select {
cursor: pointer;
-webkit-appearance: none;
padding: 1px 1.571em 1px 0.5em; /* LTR */
border: 1px solid #a6a6a6;
border-radius: 0.143em;
background:
url(../../../../misc/icons/333333/caret-down.svg) no-repeat 99% 63%,
-webkit-linear-gradient(top, #f6f6f3, #e7e7df); /* LTR */
text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
font-size: 0.875rem;
-webkit-transition: all 0.1s;
transition: all 0.1s;
-webkit-font-smoothing: antialiased;
}
[dir="rtl"] select {
padding: 1px 0.714em 1px 1.571em;
background-position: 1% 63%, 0 0;
}
select:focus,
select:hover {
background-image: url(../../../../misc/icons/333333/caret-down.svg),
-webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
color: #1a1a1a;
}
select:hover {
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
}
}
When the select element is blurred:
And when focused:
Not sure the best approach to fixing this, short of adding a parent selector on each rule (.cke_dialog_contents). IE:
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.cke_dialog_contents select,
select {
cursor: pointer;
-webkit-appearance: none;
padding: 1px 1.571em 1px 0.5em; /* LTR */
border: 1px solid #a6a6a6;
border-radius: 0.143em;
background:
url(../../../../misc/icons/333333/caret-down.svg) no-repeat 99% 63%,
-webkit-linear-gradient(top, #f6f6f3, #e7e7df); /* LTR */
text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
font-size: 0.875rem;
-webkit-transition: all 0.1s;
transition: all 0.1s;
-webkit-font-smoothing: antialiased;
}
[dir="rtl"] select {
padding: 1px 0.714em 1px 1.571em;
background-position: 1% 63%, 0 0;
}
.cke_dialog_contents select:focus,
.cke_dialog_contents select:hover,
select:focus,
select:hover {
background-image: url(../../../../misc/icons/333333/caret-down.svg),
-webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
color: #1a1a1a;
}
.cke_dialog_contents select:hover,
select:hover {
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
}
}
If this looks acceptable, I can generate a patch when I'm off the Vagrant box.