Scrollbars not visible in Safari

I’ve created a symbol and set the width to 100% and the overflow to Auto Scrollbars
When I preview the file in FF, Chrome and Opera the scrollbars appear when the stage width is less than the symbol, as expected.
However Safari doesn’t show the scrollbars, they are there and can be scrolled but are invisible.
Can anyone tell me how to make the scrollbars visible in Safari please?

Are you putting the scrollbars on the rectangle or the symbol? I tried both ways and the scrollbars show when they are on the symbol but not when they are on the rectangle (still seems a bit buggy tho).

PS: You may have to increase the size of the symbol to accommodate the scrollbars if they are on the rectangle

I believe Safari also looks at whether you have this option checked in your system preferences:

The default is ‘Automatically’ which is probably hiding it.

1 Like

Thank you both for your input.
I’m testing Hype on a commercial basis, we produce infographics and need a solid replacement to Edge Animate.
The default scrollbar settings in Safari could well be the problem so hopefully there’s an alternative solution to placing symbols and images into elements or other symbols and having Safari display the scrollbars accordingly.

I previously added an image using the code below to a rectangle:
(div class=“noborder” style=“overflow: auto; width:100%; height: 150px;”)( img src="${resourcesFolderName}/phones.png" style=" align:middle; width:792px; height: 131px; margin: 0 0px;" alt=“phones”)(/div)

Which worked well across all browsers, including Safari, for a single image.
Our infographics get translated into 5+ languages, the text is imported from xml or json into various symbols in the scene. My problem is finding a consistent solution to making scrollbars visible in Safari.
I am extremely impressed with Hype so far and apart from this dilemma and needing to find a solution to dynamically adding multiple duplicates of a symbol from the resource library into an element in the
scene Hype looks very promising.

Here’s a link to our first responsive infographic produced with Hype, its basic but you have to start somewhere :slight_smile:


@embussy, I don’t have a solution to your scroll bar issue, but I like your infographic a lot! Very impressive work, especially considering the dynamic nature of the content!

I haven’t tried this code, but the ‘view demo’ on this page does show there’s a way to potentially add CSS to always show a custom scrollbar:

I’m not sure I followed; can you elaborate on what you’re trying to do?