Firefox 63: неправильное отображение прокручиваемого контента

Question

Мы разрабатываем веб-приложение с Eclipse RAP с некоторыми представлениями. После последнего обновления FF до версии 63 содержимое левого представления, которое содержит виджет дерева, отображается неправильно. Содержание превышает представление. Вместо прокрутки содержимое отображается за пределами представления. Горизонтальная полоса прокрутки ничего не делает. Похоже, что-то перепутано со свойством CSS overflow.

Другие браузеры отображают содержимое правильно.

Кто-нибудь знает эту ошибку?

Edit:

Как это воспроизвести:

1) Создайте любой рабочий минимальный пример Eclipse RAP, например, используя EntryPoint. Мы используем Eclipse Luna Service Release 1 (4.4.1) и цель 2.3 RAP. Я предполагаю, что любые более новые версии Eclipse или RAP также будут воспроизводить его.

2) Создайте несколько виджетов. Ошибка появляется в org.eclipse.swt.widgets.Label и org.eclipse.swt.widgets.Tree, возможно, и в других. org.eclipse.swt.widgets.Text в порядке, например.

package raptest;
import org.eclipse.rap.rwt.application.AbstractEntryPoint;
import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Text;
import org.eclipse.swt.widgets.Tree;
import org.eclipse.swt.widgets.TreeItem;

public class BasicEntryPoint extends AbstractEntryPoint {

@Override
protected void createContents(Composite parent) {
    parent.setLayout(new GridLayout());

    Label label = new Label(parent, SWT.BORDER);
    label.setLayoutData(new GridData(200, SWT.DEFAULT));
    label.setText("This is a very looooooooooooooooong text");

    Tree tree = new Tree(parent, SWT.BORDER | SWT.H_SCROLL | SWT.V_SCROLL);
    tree.setLayoutData(new GridData(200, 200));

    TreeItem treeItem;
    String txt = "Very loooooooooooooooong item ";
    for (int i = 0; i < 10; i++) {
        treeItem = new TreeItem (tree, SWT.NONE);
        treeItem.setText (txt + i);
    }

    Text text;

    text = new Text(parent, SWT.BORDER);
    text.setLayoutData(new GridData(200, SWT.DEFAULT));
    text.setText("This is a very looooooooooooooooong text");

    text = new Text(parent, SWT.BORDER | SWT.MULTI | SWT.H_SCROLL | SWT.V_SCROLL);
    text.setLayoutData(new GridData(200, 200));

    text.setText("This is a very looooooooooooooooong text");
}
}

3) Запустить приложение RAP в браузере

В Firefox 63 это выглядит так (неправильно):

В Chromium это выглядит так (правильно):

Возможно, эта проблема уже решена в следующих версиях Firefox.

Бест, Юлия

Answer 1

В старых версиях RAP используются -moz-scrollbars-horizontal и -moz-scrollbars-vertical. moz-scrollbars устарела. Начиная с FF 63 вы должны включить поддержку в about: config (см. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Deprecated)

Answer 2

Причина неправильного поведения переполнения заключается в следующем:

С помощью инструментов проверки браузеров я посмотрел HTML-элементы, сгенерированные Eclipse, для примера, приведенного в вопросе.

Для виджета с надписью он сгенерировал два элемента div: один для границы и один внутри для текста.

В хроме оба имеют скрытое свойство переполнения CSS.
В Firefox только внутреннее div имеет это свойство, но во внешнем оно отсутствует. Если я добавлю скрытое свойство переполнения во внешний элемент div, метка будет отображаться правильно.

Мне до сих пор неясно, почему сгенерированные элементы отличаются для разных браузеров. Я начинаю верить, что проблема заключается в довольно старых версиях Eclipse и RAP, которые мы используем, которые больше не совместимы с Firefox.

Бест, Юлия

редактирование:

С Eclipse Photon и RAP 3.5 все отображается правильно.