Firefox scaling issue

I have an issue when it comes to scaling. I have added some javascript which scales the content proportionally when the browser window becomes larger or smaller.

However when making the window smaller in Firefox it resizes the content correctly but will allow horizontal scrolling as if the page is still the same size allowing viewing of white space. The way I thought might be a work around was to disable horizontal scrolling, however this means horizontal scrolling is then disabled across all platforms so doesn’t allow for the ability to be able to zoom and scroll horizontally on a phone or tablet which is rather important.

Is there another method I can use to prevent Firefox from having this horizontal scroll issue. All the other browser operate just fine.

Thanks in advance for any help,

It might just be a browser difference; it’d be useful to see a sample of your .hype document and the export, along with knowing which version of Firefox you are using. In general using scale transformations doesn’t change the box size for the scroll so I’m surprised this doesn’t happen on all browsers.

Thanks for your response Jonathan.

Yes it must be a difference in the browsers as Safari / Google Chrome work perfectly.

I am running the 54.0 version of Firefox. It seems there is no issue if the window is loaded small, the issue occurs when the window is reduced in size. It then offers the ability to horizontally scroll into white spaces.

I have attached the hype document below, if you would like the export files I am happy to upload them as well.

Thanks again,

Firefox Scale Issue.hype.zip (1.8 MB)

1 Like

Try setting the main container to be position: absolute. I’m not sure if this will have other negative consequences but it does solve this particular problem. You can do it by adding this line in the isScalePossible block in your code (like adding between lines 23 and 24:

"position" : "absolute",

Does that fix it?

(The CSS spec says transform shouldn’t change the box sizing, though it looks like in some cases it will. The alternative that would definitely work is to use the CSS zoom property, but firefox doesn’t support it!)

Hi,

right now we woking on e-learning content and this is what we looking for
to fit our html5 to browser-windows size.

What i need to do to test with our own documents?
I copy and past the java-script function and set them like in Ollie document.
But in my case it will not scale.

Do i miss something?

Hi Andreas,

Have you put in the HTML head of the document the following:

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

Thanks Jonathan.

I have added this additional code you have listed, and Firefox is now working just as it should along with the other browsers. I haven’t found yet any other negative consequences so, so far so good!

Thanks for your help

Ollie

1 Like

Thats it.

OMG its working. :wink:

Thanx al lot. :champagne:

1 Like