Проблема с input
Здравствуйте.
Когда пытаюсь к input прикрепить transform: rotateX(45deg). фон и шрифты в div-ах становятся мутные. Причём эти div-ы никак не связаны с вышеописанным input. то есть весь контент становится мутноватым. Если же делаю как показано ниже: Поворачиваю див содержащий input, а не непосредственно сам input. в большинстве браузеров всё отображается нормально. Кроме IE. В нём весь контент мутнеет. как обойти этот баг??? <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <style> .someText { background-color: #ffffff; } body { weight: 1920px; height: 1040px; background-image: url("http://goodimg.ru/img/fonovyiy-risunok-rabochego1.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; } .someDiv { position: absolute; top: 0; left: 50%; width: 25%; height: 10%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); perspective: 73vh; -webkit-perspective: 63vh; -moz-perspective: 72vh; } .someDiv div { height: 100%; -webkit-transform: rotateX(45deg); -moz-transform: rotateX(45deg); transform: rotateX(45deg); } .someDiv input { position: relative; top: -0.3vh; width: 90%; height: 100%; font-size: 4vh; color: #562017; } .someDiv input::-webkit-input-placeholder { color: #562017; } .background { top: 0; left: 50%; width: 1920px; height: 100%; opacity: 1; margin: 0!important; padding: 0!important; background-repeat: no-repeat; background-size: contain; background-position: center; position: fixed; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); } </style> <div class="someDiv"> <div> <input type="text" placeholder="Поиск..."> </div> </div> <div class="someText"> Какой-то текст </div> </body> </html> |
Часовой пояс GMT +3, время: 03:18. |