Таргетинг на падать? - PullRequest
Новая
       5

Таргетинг на падать?

1 голос
/ 04 февраля 2020

Я пытался масштабировать поле ввода, которое принимает дату.

Однако в Edge также масштабируется выпадающий список с запросом даты. Я не хочу этого Отлично работает на Chrome.

Пример кода: 

#normal {
    position: absolute;
    left: 100px;
    top: 50px;
}

#scaled {
    position: absolute;
    left: 100px;
    top: 100px;
}

#scaled:hover {
    transform: scale(2);
}
<!doctype html>
<input type="date" id="normal" />
<input type="date" id="scaled" />

Я думал о том, чтобы нацелиться на него явно и сказать, чтобы оно не масштабировалось.
Итак, как мы нацеливаемся на него?

Или Есть ли лучший способ сказать, чтобы не масштабировать выпадающий на Edge?

Ответы [ 2 ]

1 голос
/ 04 февраля 2020

Для целевого края вы можете использовать поддержку -ms-ime-align. edge - только браузер Microsoft, поддерживающий это свойство. добавьте эту часть в ваш css файл рядом с другими. 

@supports (-ms-ime-align: auto) {
    #scaled {
        transform: scale(1) !important;
    }
}

помните, что вы должны записать это css в отдельный файл, если вы используете inline на странице html, вы можете получить ошибка.

0 голосов
/ 05 февраля 2020

Я пытаюсь протестировать ваш пример кода с помощью браузера MS Edge (Edge Html), и могу решить эту проблему на моей стороне.

Похоже, что есть проблема с браузером Edge, и мы можем не исправить это с помощью кода.

Согласно информации из документов MDN, Scale может создавать проблемы с доступностью.

Анимации масштабирования / масштабирования проблематичны c для доступности, так как они являются распространенным триггером для определенных типов мигрени. Если вам нужно включить такие анимации на вашем веб-сайте, вы должны предоставить элемент управления, позволяющий пользователям отключать анимации, предпочтительно для всего сайта.

Кроме того, рассмотрите возможность использования функции мультимедиа с ограниченным движением - используйте его для написания медиазапроса, который отключит анимацию, если пользователь уменьшил анимацию, указанную в системных настройках.

Ссылка:

scale () Проблемы доступности

Как предлагается в документах, вы можете дать пользователям возможность отключать анимацию. В качестве обходного пути пользователь может использовать хром-браузер MS Edge. Который работает нормально.

...