HTML5 pixel alignment

*bump*

I'm keen to hear if there's been any updates to this thread. I notice a lot of these pixel-sized changes in HTML 5. Flash just isn't an option for us or our clients, and especially so given that our courses will outlive 31 Dec 2020 (Adobe's end-of-support date for Flash).

Thanks again for a great product!

Hello Christopher,

The issue that has been reported here is:

Slide object alignment is off by 1 pixel in HTML5 output

Is that the issue you are experiencing as well? I do not have an update to provide on the issue, but it has been reported to our team and this thread is attached.

If you have an example to share, we'd love to take a look.

I wanted to share some information on how we define bugs and how we tackle them when they occur.

This is incredibly frustrating.

The pixel-accurate alignment doesn't seem to even match exactly either in the editor against other items, or across to the preview.

And this is BEFORE creating an HTML output. This is editor and preview.

Here's an example storyline file, with some simple coloured boxes to demonstrate the alignment issues. There's definitely something odd with the 1px space.

Hello Christopher.  To circle back:  I saw some really inconsistent behavior with the objects and their placement on the slide stage.  I noticed a difference between objects that had the same Y position and same height -- they might look higher or lower than the other, and of course that will make for difficulty when doing precision edits.

I've included these examples in our report to our QA team, so we'll continue to monitor this issue's progress.  Thank you again for sharing such a well-detailed project; you made it easier to see the issue.

Hello guys!
Any news here?? I'm having problems with pixel alignment in Chrome v 69.0.3497.100 and Internet Explorer v 11.285.17134.0.

The HTML5 output is slightly different eventhough it's the same course and window size.

Chrome is the one displaying my course correct.

Hi there Franz!

We're still looking at this pixel alignment issue. So far, we've seen that the alignment is off in the HTML5 output, but it looks correct in the Flash output.

Thanks for including those screenshots -- I can definitely see that the alignment isn't correct in Internet Explorer. 

Do you know if you're viewing the Flash or HTML5 outputs in both of those browsers? The easiest way to check is to look at the end of the URL. If you see story_html5.html, that's the HTML5 output. 

Also, are you using Storyline 360?

Hi Alyssa,

thanks for your response!

I'm using the story_html5.html file in both browsers.

I don't use Storyline 360. I use Storyline 3, but that should be the same - right??

Hi Franz,

Yup - that's an open issue in Storyline 3 and Storyline 360. 

We'll let you know here as soon as we can!

Hi there! I'm curious if this HTML5 pixel issue is still being resolved? I'm running into what I think is a similar issue. Everything looks aligned nicely on the stage, but in preview/publish there appears to be a pixel misalignment. In the attached .story, it is the red bar inside the cell that is the issue. It appears to 'jump' up by a pixel on preview. Thanks in advance for any help/guidance.