HTML5 pixel alignment

Jul 28, 2017

Hi,

Anyone experiencing pixel misalignment when outputting to HTML5?

For example I have white shape blocks that have a picture on top, all aligned correctly so there are no gaps etc. Looks great on preview but these elements are misaligned when viewing in html5. A single pixel line shows either around, above or below the two elements.

29 Replies
Paul Knights

Sure, I have saved a single page of the course to highlight, just look on the popup layer. You will see that the white box is exactly the same height as the picture. When publishing to html5 this produces a single white pixel line at the bottom which should not be there.

However, if you make the white box a single pixel smaller the white line disappears so we know something is going wrong inside storyline. I've added a couple of screenshots too.

Thanks.

Alyssa Gomez

Alright, Paul. I have a couple of links for you to test. 

I do see a slight difference in the Flash output vs. the HTML5 output of your file. Take a look at these, and let me know if that matches what you were seeing:

I also uploaded your PNG image to a new Storyline file, along with 2 other PNG images. The white line seems to be most noticeable in with your image, but I do see a very faint white line with the other images, as well. 

Here's a screen recording of what I saw in Chrome v60. I'm going to take this to my team, and we'll determine next steps. Sometimes they catch errors in my logic, and we don’t have a bug after all. Of course if that’s the case, I’ll let you know!

Thanks again for bringing this up here, and I'm sorry if it's slowing you down. 

Paul Knights

Hi Alyssa, Seems much better to me as in the past we have had a pronounced white line before. Maybe its to do with the player scaling in different sized browser windows? Anyhow appreciate the feedback and investigation. Let me know if the team resolve the issue as having a pixel perfect application would go a long way to improve quality of the courses.

Thanks.

pk

Elisabeth Mayrhofer

Any update on this case? Seems I'm having the same problem that in Flash the pixel alignment is ok but in html5 the aligment is not looking proper. I'm working with pictures, overlayed by white transparent rectangles. The rectangles do lay on the same position, same size as the pictures. In Flash it's looking good but in html5 it looks like there is a thin border at the end of the picture. Thanks in advance for a short response.

Alissa Phillips

We are also experiencing this issue. We have had several clients come back to us saying there are gaps around our images (when in fact they are extended way past the borders on the slide). This problem occurs when the user resizes their browser. It seems to be when the browser is full screen, it fixes the gap. 

I have attached two screenshots of what our clients are seeing. This file was published for their LMS and the screenshots were taken while viewing in SCORM cloud. 

Seeing as how we cannot deliver our products until this error is fixed, we are hoping for an update soon. 

Alyssa Gomez

Hi Alissa,

Sorry you're running into this bug, and I know it has to be frustrating for you and your clients.

I think the problem you're seeing here is a bit different than what we've discussed earlier in this thread. From the looks of your screenshots, it appears the issue you're seeing is with the slide background. 

I recently helped another community member with the same problem to work around this bug by adding the background image to the slide master. Perhaps that will work in your file, too!

I'd be happy to test a few solutions for you, if you don't mind sharing a sample of your file with me. You can attach it directly to a new thread comment. 

Christopher Wiseman

*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!

 

Leslie McKerchie

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.

Christopher Wiseman

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.

Crystal Horn

Hi there, Christopher.  I'm sorry you're feeling burned here.  The Preview function in Storyline renders in HTML5, which would explain why it looks different than what you see on the slide "stage" as you're building it.  The Preview should match what you see in the HTML5 output.

Can you share your .story file for us to test so that we can help prioritize this bug?  If you need to do so privately, you can submit it here and attach my name to it.

Thanks again for working through it!

Crystal Horn

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.

Alyssa Gomez

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?

Jon Verey

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. 

Lauren Connelly

Hello Jon!

Thanks for sharing your file! I opened the file on my end using Storyline 360 Update 37 (Build 3.37.21453.0), and here's what I found!

Unfortunately, I'm not seeing what you're describing so would you mind sharing what it looks like on your end? 

Here's what it looks like in the published web version vs. preview in Storyline 360.