prevent screen from juddering when clicking on diagram #15815
Conversation
|
We didnt to this to avoid double scrollbar issues with scrollable modals. See loadpoint settings in demo config:
But I guess doing this change except when modals are open would be fine. Can you test this on your devices? |
|
Hi, I use Firefox and I do not have this problem with the doubled scrollbar: However, I can move the screen slightly to the right. I think this is not intended? Do you have the same issue? |
No i dont. Is your video with or without the overflow change? Firefox on Android? |
|
I have this behaviour with and without the overflow-change. |
|
It's due to the footer: |
What device/resolution? We already have a "short version" for the "100% solar" text but it doesn't seem to be short enough. at lease for dev-builds with long version. |
|
Samsung Galaxy A71 with 1080 x 2400 px. Before the text is cut off, I suggest using mediaqueries to place it in two lines in the centre if the screen is too small or the font size too large. |
|
Here are all translations for this text: |
|
I added this: body:not(.modal-open) {
overflow-y: scroll;
}and added a media query, which wraps the text in two lines if the screen is too small. On my devices (computer + smartphone) both issues are solved. Does this work on your devices, too? |
|
Scrolling tests look fine. Let's give it a try. I replace the wrap with truncate of the version number. This is the least important information in the footer. Generally I also like the two line wrap but we should not do it based on a fixed media query. A proper solution would be content based because translation texts may vary in width. Flex wrap does this by default, but i dont see a proper way to do the centering in case of a wrap. So lets keep it simple and just truncate/clip the version part when space is low. 
|
Hi,
If you click on the
In-Out-diagram, the screen jerks:video-before.mp4
Adding
overflow-y: scrollto the<body>-tag prevents this:video-after.mp4