HTML5 pixel alignment

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:

• Flash Output
• HTML5 Output

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. 

• Flash Output
• HTML5 Output

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. 

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.

This is still a bug, right? X/Y coordinates and size match perfectly but don't align visually perfectly.

Any update?

Hi Paul,

What version of Storyline are you using? Can you screen some screenshots and a link to your course so that we could take a look? 

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.

Hi there Paul,

Thanks so much for the screenshots and the project file. I'm testing this with a new PNG file, and I'm seeing similar behavior. I'm going to look a bit deeper, and I'll pop back in and let you know what I find!

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

I hear you, Paul. I will absolutely share an update here as soon as I get more information. Thanks!

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.

You've come to the right place to stay updated on this bug, Lisi. We're still monitoring it's impact, and we'll share the news here as soon as a fix is released. You'll be notified immediately since you're now subscribed.