Wrong UI calculation for horizontal scrollbars since Chrome 105

[eclipse-rap]

Wrong UI calculation for horizontal scrollbars since Chrome 105

[ifurnadjiev]

Just updated to Chrome 105 and I can't reproduce it with our Controls Demo and with Workbench Demo (business theme). I'll give your snippet a try when I have time

[jfuerter]

I'm sorry, I should have mentioned that. I already tried to reproduce it in the Controls and Workbench Demo but couldn't find a similar place. And maybe the problem doesn't affect all ScrolledComposites but only ScrolledForms (as used in my example).

[jfuerter]

@ifurnadjiev I'm more than willing to debug this problem in order to provide a possible solution for the issue.
To avoid spending hours after hours in the wrong place, could you please give me a hint where to look?

[ifurnadjiev]

Probably you can debug it by inspecting (in Chrome dev tools) first the horizontal scrollbar div height. The client-side handling of the ScrolledComposite is done in Scrollable.js where the two scrollbars are positioned.
Is it possible to create a self-running project to demonstrate the issue?

[jfuerter]

While debugging in Chrome I thought I'd found the problem. (I had a scroll area with a bottom position of -17 and a height of 708 Pixels, as soon as I changed the bottom position to 0 and the height to 691 Pixels it worked as excepted). But I found out that calculation was the same in Chrome 104 and there it worked quite fine.

So I prepared a simple Projekt based on the 'RAP Mail Template' using the classes above. It turned out, the key to the problem is that it only occurs when I'm using the business.css from org.eclipse.rap.design.example_3.22.0.20220617-1351.jar.

Do you want me to upload the sample projekt somewhere or do you prefer to reproduce it with the business.css yourself?

[ifurnadjiev]

Is the .css file the only difference in the mail demo? Probably some CSS definitions in the business.css are not updated accordingly.
Please upload the demo project somewhere in order to get it from there.

[jfuerter]

Here is a link to the demo projekt (only available for 7 days): https://we.tl/t-IbvuSW8pqU
(edit 2022-09-19 @mknauer : attached ZIP archive from the above link as Issue 53.zip)
After starting the webapp you have to klick on the '+' icon to open the editors with the horizontal scrollbars to reproduce the problem:

Otherwise here the description what I did to the mail template projekt:

The mail template doesn't have the required editor (to reproduce the problem). I've integrated all the classes above in the corresponding packages, extended the plugin.xml by the following:

   <extension
         point="org.eclipse.ui.editors">
		<editor
			class="test.TestEditor"
			default="false"
			id="test.TestEditor"
			name="Test (NON-NLS)">
		</editor>
   </extension>
   <extension
         point="org.eclipse.rap.ui.themes">
      <theme
            file="theme/business.css"
            id="test.theme"
            name="Theme (NON-NLS)">
      </theme>
   </extension>
   <extension
         point="org.eclipse.rap.ui.branding">
      <branding
            id="test.branding"
            themeId="test.theme"
            title="test">
            <additionalHeaders>
				<meta name="robots" content="noindex, nofollow, noarchive, nocache, nosnippet" />
			</additionalHeaders>
      </branding>
   </extension>

Changed the entrypoints definition to use the branding:

   <extension
         id="mailapp.entrypoints"
         point="org.eclipse.rap.ui.entrypoint">
      <entrypoint
            applicationId="Issue_53.mailapp"
            brandingId="test.branding"
            id="mailapp.entrypoint"
            path="/mail">
      </entrypoint>
   </extension>

And you have to add the business.css as well as the required 'img' and 'theme/resources' folders from the mentioned .jar file.

To open the editors I changed the 'OpenViewAction' to open my TestEditor instead of the default one.

[ifurnadjiev]

I can reproduce it with the provided test project. I'll investigate it when the time permits.

[jfuerter]

Thanks a lot, I'm looking forward to it.

[jfuerter]

Thanks alot for the quick fix! I really appreciate it.

[theanuradha]

@ifurnadjiev how can anyone get it on custom components ? as I have html base custom components and all scrollbars is gone now ? can I use some style to get back default like before inside custom component div ?

[ifurnadjiev]

@theanuradha as the fix for this issue is just pure CSS, you can always change these values to fulfill your needs.

[theanuradha]

@ifurnadjiev what should I use Im trying but it not get me the native scroll inside div

[theanuradha]

[theanuradha]

@ifurnadjiev how can I remove this globally or provide custom rwt-index.html

[ifurnadjiev]

Use HEAD HTML with custom CSS to override default settings globally:
https://github.com/eclipse-rap/org.eclipse.rap/blob/main/examples/org.eclipse.rap.examples/src/org/eclipse/rap/examples/internal/ExampleApplication.java#L35

[theanuradha]

@ifurnadjiev When use HEAD_HTML it go before

[theanuradha]

this is what I set to HEAD_HTML

                + "      div::-webkit-scrollbar {\n"
                + "        width: unset;\n"
                + "        height: unset;\n"
                + "      }\n"
                + "      div {\n"
                + "        scrollbar-width: unset;\n"
                + "      }\n"
                + "    </style>"````

[ifurnadjiev]

You can also use org.eclipse.rap.rwt.client.service.ClientFileLoader.requireCss(String) to load CSS at runtime.

[theanuradha]

@ifurnadjiev ClientFileLoader.requireCss helps with load order but it not override and bring native scroll EG:

if I use browser tools to remove original properties then only it show native

[ifurnadjiev]

The problem came from the values that you set. You keep width/height to 0.

[theanuradha]

@ifurnadjiev what I should do to set to native default ?