Horizontal scrolling issue in Google Chromes latest update

[jamestrick189]

A recent Google Chrome update seems to have caused a horizontal scrolling issue on some of my Muse built websites. Has anyone else noticed this or have a solution to fix the problem?

[Nancy OShea]

A link to the problem site might shed some light.

Browsers like Chrome and Firefox are regularly updated to support new technologies and improved web security.  Meanwhile, Muse development ended more than a year ago.  It's inevitable that some things will stop working.  The best exit strategy is to stop using Muse and re-build sites with modern software that supports native HTML, CSS and JS files. 

[hugob53643031]

Hello,

Yes, the same happens to me with all the websites done. The space for top part for the menu remains with the desktop size and it shows long horitzonal scroll (although all the rest of the website remains correctly resized...).  Any solution please?

[Günter Heißenbüttel]

Could you give us a sample link?

[hugob53643031]

Hello Günter,

Yes, I have prepared this test site: https://www.test.salvat.com.bk1.z10.ovh/mtconsulting/testing/

It only breakes down in chrome mobile browsers.

In other mobile browsers it looks fine:

 

But in chrome for android looks this way:

I have been trying different options and I think that it has to be with the fluid witdh af the break points. But, if I turn them into fixed, the content moves to the right (and we have lots of webs done, we cannot open all of them to rebuild mobile content).

[Günter Heißenbüttel]

Unfortunately I can’t test this in depth, because I don’t have an Android device.

Interestingly, the responsive simulation mode (developer tools) of the last(!) version of Chrome desktop show your site correctly.

The developer tools of the newest(!) version (on Mac: 77.0.3865.75) however displayes a really scrumbled view, when resizing the browser window.

I assume, we are running here into quite a heavy browser bug.

[hugob53643031]

Yes but, which is the solution? I have made a issue to Google (with no answer yet) but I think Adobe has to talk to them...

[Nancy OShea]

"I think Adobe has to talk to them... "

Ha, ha, ha, ha, ha, ha..... Google listens to no one except Google.

[jamestrick189]

http://muse.adobe.com/

[hugob53643031]

Hi James! Why do you redirect me to muse's home? Thanks.

[jamestrick189]

You asked for a sample link. The Adobe Muse website is having the same problem in Google Chrome

[GrahamBedbrook]

I am seeing this same issue. I tried to add some code to hide the horizontal scroll bar to fix the problem and it works on some but on othersites it seems to add an additional vertical scroll bar.

[jamestrick189]

I tried this too and it was also causing a problem on touch screen devices. It would be nice if someone from Adobe actually cared and helped to solve the issue

[Nancy OShea]

"It would be nice if someone from Adobe... helped to solve the issue ."

#1 This is a user-to-user forum, not tech support.

#2 Muse's End of Life was announced last year. The developers are gone.

#3 Maybe it's time you switched to alternative software.

[jamestrick189]

Support has Bern extended to 2020 and I have submitted a request for support. I have also already switched to alternate software but still have over 50 Muse sites that were built over the last 6 years...

Maybe you should go elsewhere with your replies.

[Nancy OShea]

"I have submitted a request for support" Good luck with that. Muse has no development team since last year.

[jamestrick189]

Funny that, because I did get a reply but still waiting. Maybe you need to work on your knowledge before commenting with advise. Besides, this thread is for those experiencing the same issue, not for someone who has nothing better to do

[hugob53643031]

Hi James,

I also contacted Google and they have opened an issue with this problem. It has been assigned to someone...  but no more news since now.

[romanoqro]

I found two codes that helped me. 

For the problem on mobile design on the master page. Insert this HTML code:

<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />

And por the PC design go to PAGE / PAGE PROPERTIES / METADATA :

(Don´t use it on the master page)

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/wow/1.0.3/wow.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.1/animate.min.css">

<style>
body
{
overflow-x:hidden;
}
</style>

<script>
$(function() {

var $body = $(document);
$body.bind('scroll', function() {
// "Disable" the horizontal scroll.
if ($body.scrollLeft() !== 0) {
$body.scrollLeft(0);
}
});

});
</script>

[sstuart48]

I tried this fix @romanoqro. It works for the mobile breakpoints i.e. under 960px fluid width, however, using a laptop / desktop to view i.e. from 960px up to 1920px it created a double horizontal scroll bar. I tried all combinations of these code snippets between the master and the individual pages but to no avail.

[Günter Heißenbüttel]

Pkease show us a working link.

[sstuart48]

Here is an example: http://360.rubumarketing.com this is WITHOUT the code from @romanaquo, if you implement his code as he instructs, it will create a double scroll on the Y axis for desktop

[hugob53643031]

Hello!

I tried with the code given last week and it worked in some mobiles, but not in all mobile devices.

Now I have tried another thing that seems to work: I have changed all the "mobile" o "tablet" breakpoints in the page and set as "fixed" instead of fluid. Then, all the things have moved into right and I have put them correctly again and it seems to be fine now. The thing is that I have done lots of websites with MUSE and I cannot go through all of them to correct them, but at least, for the new I was doing it seems to work. Meanwhile, waiting for google and a solution for this thing... 

[Günter Heißenbüttel]

Does it help, if you go to menu "File/Siteproperties" and choose "Browser Scrollbars: Automatic" in the "Content" tab.

Additionally: When there is a horizontal browser shift, such a code snippet may remedy the symptoms, but nut the reasons.

The reasons for horizontal scroll bars almost is the fact, that some elements are placed overlapping/outside the page/breakpoint boundaries.

Just look at this thread (containing a small screencast): https://community.adobe.com/t5/Muse/Page-is-Shifting-Horizontally/m-p/4790837

[sstuart48]

Hi Gunter, I appreciate the attempt to support here.

It was always set to automatic, that isn't the issue. It's also not to do with elements outside of the boundaries, I know this because this is now happening to all of my existing websites that are already hosted by clients and were responsive mobile before with no issues. It's something to do with the latest update to Chrome and Firefox. I can see as well visually it's the header element that Google / Firefox "do not like". Either we need to find a simple code snippet solution or we have to cross our fingers and hope Google and Firefox push an update through to rectify the situation. Or of course, Muse update the HTML export to comply but I doubt that will happen.