I have run into an issue with browser width slideshows in Muse 2018. Regardless of whether I use one of the built-in slideshow widgets, or one from Musethemes.com, for example, I get the same result. When previewing and scaling down the width of the browser (in this case between my 1200px and 960px breakpoints), I end up with horizontal scroll and white space to the right of the page.
Any other reports of this, or is it a non issue which is being worked on?
This should not be the case. Did you publish it somewhere like on BC for test purposes?
Share this link with us, so we can have a close look.
Thanks. It's entirely likely this is just "operator error," but it keeps happening to me no matter how many times I start from scratch.
I put together a quick example of what I'm talking about and uploaded to BC...
Could you share this .muse with us?
Just this reduced version?
To be honest, I don`t have a clue what´s going on on your example site – means I am able to reproduce your issue completely but have no solution. There shouldn`t be a solution necessary as this is not a real big thing (thought till now).
Trying a completely new site with a slide show, I found it better to use a "responsive in width and height" slide show, instead od your approach "stretched to browser width".
The NEXT and PREV buttons behave, let´s say, strange. As soon as I place them in a different place, like you did, you have to pin them to the container of the slide show. They do not move as wanted, inside the slide show BUT if these two buttons stay outside the image they behave as wanted ans stay in conjunction with the images.
I didn`t realize this when trying slide shows in the prerelease.
These are 4 alternatives to look at, There might not be the solution for you but this has to be checked I guess.
Thanks for taking the time to try and help me with this frustrating problem. The 4 options you came up with are greatly appreciated.
I've been messing around with the slideshow a bit more, and have discovered that (at least in Firefox... I haven't tested in other browsers as of yet), the problem appears when the slide transition is set to horizontal. When I have it set on "fade," the scrollbar and white space does not appear. I discovered this while trying to add bold caption overlay to each slide (which behaved similarly to the arrows). During the process I switched the transition to horizontal, and when I tried to backtrack to see if there was a specific action causing the horizontal scroll, it turned out to be the transition.
I'm not knowledgeable enough to get much beyond this point, but it seems like an issue within the widget that Adobe could easily fix, doesn't it?
You are definitely right!
The scroll bar is not present, if you set the slide show transition to „fade“.
I think, this issue is fixed for the actual slideshow widget in Muse 2018.0.
But obviously there seems to be a problem, when an older slide show is converted to the newest version.
What do you think ankushr40215001?
The problematic slideshow was created from scratch in the newest 2018 version with the "basic slideshow" widget. No issues with the fade transition, but as you affirmed, the horizontal transition doesn't want to cooperate (I haven't tried the vertical transition as of yet). There were a slew of bugs in the Aug 22 release, so I'm wondering if it's possible this one just slipped through the cracks?
Thanks for the assistance!
And again: You are completely right!
I tested it once again. And the error is triggered by the actual version of the slide show widget, when the transition is not set to „fade“. Please excuse my error!
I don’t think, this error was forgotten to be fixed. I think, simply nobody has noticed or reported it until now!
For what it's worth, when I originally ran into this issue earlier today, I assumed it was something I was blindly overlooking. I tried inserting an older horizontal slider widget from musethemes.com at full browser width, and ran into the same problem with a horizontal scroll appearing.
Guenter and Uwe: Thank you for bringing this issue to our notice.
mjhart: Can you please send me your Adobe ID, location, and phone number over a private message? To send a private message, click my picture and use the Message button. We will get in touch with you for investigation. Ensure that your message also contains a URL to this post for reference.
I think I can identify the problem that is creating this horizontal scroll bar.
You see on the image-1
The slide of the slideshow has css of 1200px (breakpoint width) which is taking the extra space in the right side. Thus creating a horizontal scrollbar.
if I change this to 100% instead of 1200px the problem solves. (image-2).
Please let me know your thoughts, and If I am missing something.
I believe this is a typical behavior in Safari. This question came up, about the horizontal scroll bar, with a client a while back.
Check this site in Chrome then Safari. No scroll bar in Chrome or Firefox but it is there in Safari.
You will see the scroll bar appear off and on. I forgot why. It might of been something to do with "off browser content". Safari shows you there is more.
Contrary to what you may have heard users do resize there browsers on desk/laptops. It won't be there on mobile. There still may be a fixable solution if it has to do with the horizontal-fade, etc. We will see what the Muse engineers respond with.
Agree with you @HMAM
if the problem can be solved by changing transition style that would be great.
I was viewing the website in Chrome (Mac) and seen the problem and Found the unusual CSS in the inspector.
With the Wordpress sites there are certain sliders that do this. Muse does things in its own way so beyond my expertise...
Below is the synopsis of what I forwarded along to Preran. You can "fix" the issue by keeping the transition setting at the default "fade," but hopefully a true solution/update can be found...
1. Create a new site in the 2018 release of Muse.
2. Set the max page width to 1200px (fluid).
3. On the “home” page, drop the “Basic Slideshow” widget. Place the slideshow at the top of the page (Y position=0).
4. Select the hero image and set the resize value to “stretch to browser width”
At this point, if you preview in Chrome, Safari, or Firefox, everything appears to work normally with the default transition setting of “fade.”
5. Click the blue arrow on the slideshow widget, and change the transition effect from the default “fade,” to either “horizontal” or “vertical.”
Go ahead and preview the site in browser. If your browser width is greater than 1200px, once again everything appears normal.
6. Resize your browser width in either Firefox or Safari, and once you get below a width of 1200px, a horizontal scroll appears, and if you scroll over to the right you’ll notice white space (the image no longer stretches to the width of the browser). The further you downsize the browser window, the larger the white space gets.
Note I: The Chrome browser still appears to display the slideshow normally, regardless of which slide transition setting is used.
Note II: The same problem arises in the iOS version of Safari when the slide transition is set to horizontal or vertical.
mjhart77 I am hoping that there is a stable solution and Adobe will be able to come up with that.
In the meantime if you are facing major problem and if the website is live and want to get rid of the problem immediately,
here is my solution:
add this to your master page <head> (Page > page properties > metadata)
overflow-x:hidden; /*--for chrome and firefox -- */
overflow-x:hidden; /*--for safari -- */
overflow-x:hidden; /*--for chrome and firefox -- */
overflow-x:hidden; /*--for safari -- */
hope this will solve the problem for the time being.
Thanks Touficnabi-- I'll give this a try. Luckily, I'm still in the early stages of piecing together the site, so it's not impacting something I've already published.
I wonder, however, what the impact of this is on third-party slideshow/slider widgets? When I first stumbled onto this issue a couple of days ago, I assumed there must have been something simple that I was just overlooking. I tried a slider widget from musethemes.com (which had a horizontal transition between slides), and had the same result. If the third-party firms that collaborate with Adobe are being impacted, I would thing the Muse team would try to get a quick fix in place ASAP. As your solution indicates, it's likely just a matter of a line or two of code that needs to be updated within the Muse framework.
True, the issue is simple, thus the solution.
Though, I don't recommend relying on third-party widget initially (if not must) in a muse website. As a widget provider in the community, I know there are lot of parameters that third-party widget providers fail to meet.
Where as adobe poses the full potential to come up with solution for almost every problem. and I'm sure they will do it.
I don`t get the horizontal scroll bar in Safari Version 11.0 (12604.1.38.1.7) on OS X 10.12.6.
on the Casper website.
It appears towards the smaller sizes...
The scrollbar only appears, when the page is previewed in Safari. Chrome doesn’t show the scroll bar.
And If I replace your slideshow by a new one, configure it identically and import your images, all works fine.