Переполнение: авто и фиксированная высота делают размытый текст в Microsoft Edge - PullRequest
Новая
       15

Переполнение: авто и фиксированная высота делают размытый текст в Microsoft Edge

0 голосов
/ 13 марта 2019

У меня есть выпадающий список, который содержит несколько строк текста.Я хочу отобразить весь текст в раскрывающемся списке с фиксированной высотой, для которого я использую min-height, чтобы установить высоту, и для того, чтобы иметь прокрутку, если длина текста больше, чем высота раскрывающегося меню, которое я использую overflow: auto.В Chrome / Firefox он работает нормально, но в Microsoft Edge текст выглядит размытым.Пример ниже:

Добавлен раскрывающийся список со свойством переполнения

Раскрывающийся список без свойства переполнения

Иллюстрационнаяпочему мне нужно свойство overflow

Изначально я думал, что это как-то связано с popover.js и gpuAcceleration, которое использует CSS-преобразование при отображении выпадающего меню, но я исправил это, и текст все еще выглядит размытым.

Редактировать (исходный код): 

<div class="col-lg-8 col-md-8 col-sm-8">
   <div class="nav-link dropdown-toggle d-inline-block" id="selectOptionThree" data-toggle="dropdown 
              aria-haspopup="true" aria-expanded="false" (click)="showDescriptionOptionThree(optionThree)">
       <button class="btn btn-danger btn-sm pointer">Info</button>                                                                                        
   </div>
   <ul class="dropdown-menu col-lg-12" aria-labelledby="selectOptionThree" style="max-height :400px; overflow: auto;">
       <div id="optionThree"></div>
   </ul>
</div>

Функция берет текст из бэкэнд-сервиса и добавляет его к элементу div с идентификатором "optionThree".

1 Ответ

0 голосов
/ 13 марта 2019

После пары поисков и попыток я обнаружил, что используя следующие свойства: 

height: auto;
max-height: 400px; 
overflow: hidden;

исправляет проблему. Проблема появляется только при использовании выпадающего меню с фиксированной высотой и переполнением в Microsoft Edge. Надеюсь, это поможет и другим.

...