react-scss: проблема отображения с размытием и преобразованием, только на "КРАЮ"

#css #reactjs #sass #microsoft-edge #display

#css #reactjs #sass #microsoft-edge #отображение

Вопрос:

Всем доброго утра,

У меня проблема с отображением под «КРАЕМ», как показано на двух фотографиях. Я пытаюсь имитировать тень на столе, в CHROME все работает нормально, под краем отображается только половина. Я кодирую в «React, scss».

Если у вас есть идея? Я пытался манипулировать высотой, переполнением… но ничего

в EDGE изображение edge

в CHROME: все в порядке с изображением chrome

Код простой :

     .ombre_table{
    min-height: 5vh;
    width: 100vw;
    margin-bottom: 2vh;

    text-align: center;
    
    transform: rotatex(75deg) rotateY(-2deg);
    font-size: 15vh;
    filter: blur(7px);
    

}

1. Какую версию браузера Edge вы используете? Я могу воспроизвести проблему с Edge 86.0.622.69 с помощью этого примера . В моем примере проблему можно решить, изменив значение min-height на height . Вы также можете попытаться изменить что-то подобное в своем коде, чтобы переместить текст немного выше в качестве обходного пути. Кроме того, я также тестирую в Edge Dev 88.0.692.0, и он работает хорошо, поэтому я думаю, что проблема может быть исправлена в будущей версии Edge. Вы также можете предоставить отзыв об этой проблеме в Edge, используя Alt Shift I.

2. @YuZhou: спасибо, за правильные подсказки, проблема решена.

3. Я рад помочь. Вы также можете пометить свой ответ как принятый ответ. Это может помочь другим членам сообщества в будущем в подобных проблемах. Спасибо за понимание.

Ответ №1:

при большом повороте по оси Y высота элемента мало влияет на размещение, поэтому я значительно увеличил размер высоты и добавил верхний отрицательный запас. спасибо Ючжоу

 .ombre_table{
min-height: 35vh;
width: 100vw;
margin-top: -5vh;

text-align: center;

transform: rotatex(75deg) rotateY(-2deg);
font-size: 15vh;
filter: blur(7px);

}

Ответ №2:

перейдите в раздел «about:flags» в браузере edge и включите свойство filter