Employee Center Portal - Black horizontal lines appearing on screen

Daniel Arnold
Tera Guru

‎04-18-2025 11:42 AM

On the employee center portal, I noticed that when I press and hold on the side bar and scroll down on the page, these lines appear on either side. It doesn't matter which page I'm on either, it always shows. Also, the lines don't appear if I use the scroll option on the mouse itself, just when I use the side bar. 

 

I took a look at one of our instances that has the OOB employee center without any configuration and it also has this behavior. Does anyone know of a fix for this?

DanielArnold_0-1745001663696.png

 

0 Helpfuls
  • 497 Views
3 REPLIES 3

Robert H
Mega Sage

‎04-18-2025 12:05 PM

Hello @Daniel Arnold ,

 

By "side bar" you mean the vertical scroll bar of your browser window? I cannot reproduce this issue on an OOTB Yokohama instance. And somehow these artifacts don't look to be caused by the webpage being rendered but rather by the browser itself or maybe even the graphics driver. Please try a browser with a different engine, toggle the browser's hardware acceleration feature, or even try on a different computer if possible.

 

Regards,

Robert

0 Helpfuls

Abhayraj
Tera Contributor

‎04-18-2025 11:31 PM

Hello Daniel,

 

You can try by clearing service Portal cache via /sp_portal_cache.do

 

You can also try by  Service Portal > Portals > Employee Center and verify the:

  • Homepage

  • Theme

  • URL suffix (e.g. /employee)

Use the sp_debug tool to analyze portal performance and widget errors.

0 Helpfuls

No_name
Tera Contributor

‎06-18-2025 09:21 AM - edited ‎06-18-2025 09:34 AM

This appears due to a bad implementation of web-page layout by ServiceNow, particularly utilizing Angular with plenty unnecessary DOM elements where each element contains big list of events that bowser tries to handle and re-render the page. The solution would be to simplify the implementation for easier rendering by rebuilding the portal structure to a proper one.

I can presume you would like not to rebuild something you are paying for? Then you may try to tweak the rendering engine with overflows. The most elegant solution I've come up with is to utilize body scrolling as it has better performance compared to DOM scrolling. The CSS would be:

body>div>section{overflow:hidden !important;}
body,div.page,section.page{height:unset !important;}
/*html element is not included as it might be used for full-size elements*/

After that go through all the pages and fix some inline sizes set by JavaScript, most of them will be useless.

0 Helpfuls