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.

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.

HTML5 pixel alignment | Articulate

JonathanVerey
Community Member
5 years ago
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.
HTML5_pixel_issue.story149 KB
LaurenConnelly
Staff
5 years ago
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.
PiotrBurchart-d
Community Member
5 years ago
Hi,

There is a problem with the alignment on both: the stage and preview mode:

PS: I had a similar problem with objects alignment (to achieved proper alignment within the publish module I got rid of positioning within the source file.

PB
KatieRiggio
Staff
5 years ago
Great eye, Piotr!

I shared this example in our report so we can keep everyone updated on any new developments on this bug's status. Thanks again for pointing that out!
LaurenConnelly
Staff
4 years ago
Hello Mark!

Thank you for checking in on this bug. We still have this bug logged and it is occurring in the latest version of Storyline 360. We're currently prioritizing other bug fixes for upcoming releases so I don't have a timeline to share. If this makes it on our roadmap, I'll update you in this discussion.
JoshStevenson-8
Community Member
3 years ago
My team and I are still seeing this layout issue to this day, both in the slide view, preview mode, and HTML5 output, scaled to 100% so that pixel anti-aliasing shouldn't be an issue.

We are using v3.61.27106.0

Has any progress been made? This really makes our output look sloppy and unprofessional, and we haven't been able to find a suitable workaround.
MCostaStienstra
Staff
3 years ago
Hi, Josh.

Thank you for reaching out!

Since this is an older discussion, can you share a screenshot of what you're experiencing? If you can share the .story file through a support case, we can also take a deeper look at what's happening in your project.