Weblate: The Prism.js textarea is not correctly rendered on firefox

[Fat-Zer]

Describe the issue

The textarea is not correctly rendered for me. It displays both the original textarea border as well as the Prism.js's div:

It's worse with multi-line text:

I already tried

I've tried to run it on a clean profile: the same result.
I'm using firefox-68.4.1 on Linux; I haven't tested with a more recent version yet.
Works fine on Chrome on both Linux and Windows.

Server configuration and status

Weblate installation: weblate.org service

Additional context

Also unlike Chrome the textarea is manually realizable in firefox.

[nijel]

It works fine for me on Firefox 84 on Linux. Do you see any errors in the browser console? The sizing is supposed to be done by JavaScript.

Can you try if some of the following editors work fine for you? We're not using directly any of these, but the basic idea behind them is same:

• https://codersblock.com/blog/highlight-text-inside-a-textarea/
• http://satya164.xyz/react-simple-code-editor/
• https://lonekorean.github.io/highlight-within-textarea/
• http://kueblc.github.io/LDT/examples/generic.html

[nijel]

Okay, we rely on ResizeObserver, which is not present in some older browsers: https://caniuse.com/resizeobserver

[Fat-Zer]

Sorry I was caught up playing around with those editors... A bit too late, but for the record:

Do you see any errors in the browser console?

There are:

jQuery.Deferred exception: ResizeObserver is not defined initHighlight/<@https://hosted.weblate.org/static/CACHE/js/output.b29f000b9af5.js:1787:324
initHighlight@https://hosted.weblate.org/static/CACHE/js/output.b29f000b9af5.js:1781:73
@https://hosted.weblate.org/static/CACHE/js/output.b29f000b9af5.js:1816:893
mightThrow@https://hosted.weblate.org/static/CACHE/js/output.b29f000b9af5.js:235:18
resolve/</process<@https://hosted.weblate.org/static/CACHE/js/output.b29f000b9af5.js:237:89
 undefined output.b29f000b9af5.js:246:246
ReferenceError: ResizeObserver is not defined output.b29f000b9af5.js:1787:324
    initHighlight https://hosted.weblate.org/static/CACHE/js/output.b29f000b9af5.js:1787
    forEach self-hosted:266
    initHighlight https://hosted.weblate.org/static/CACHE/js/output.b29f000b9af5.js:1781
    <anonymous> https://hosted.weblate.org/static/CACHE/js/output.b29f000b9af5.js:1816
    mightThrow https://hosted.weblate.org/static/CACHE/js/output.b29f000b9af5.js:235
    process https://hosted.weblate.org/static/CACHE/js/output.b29f000b9af5.js:237
Source map error: request failed with status 404
Resource URL: https://hosted.weblate.org/static/CACHE/css/output.2a3154b78fb0.css
Source Map URL: bootstrap-datepicker3.css.map

Can you try if some of the following editors work fine for you? We're not using directly any of these, but the basic idea behind them is same:

All of those work fine

Okay, we rely on ResizeObserver, which is not present in some older browsers: https://caniuse.com/resizeobserver

yep, looks like it...

[github-actions[bot]]

Thank you for your report, the issue you have reported has just been fixed.

• In case you see a problem with the fix, please comment on this issue.
• In case you see a similar problem, please open a separate issue.
• If you are happy with the outcome, don’t hesitate to support Weblate by making a donation.

[Fat-Zer]

@nijel, did you already pushed the fix to the hosted Weblate?

[nijel]

Not yet. You will notice the fix as it disables highlighting on not supported browsers.

[Fat-Zer]

yep, thanks... I was concerned it didn't work...

[nijel]

Sorry, but I don't want to spend time on developing support for browsers no longer supported by a vendor. See https://docs.weblate.org/en/latest/contributing/frontend.html for our browser support statement.

[Fat-Zer]

No problem, I'm totally fine with the solution... I thought may be the disabling itself somewhy didn't work out...