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.
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 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!
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.
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.
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.
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.
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.
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).
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.
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.
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.
Thanks, Christopher! I've grabbed your case submission as well. I'll have a look and connect your sample to our documentation. I'll follow up with you soon!
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.
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.
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.
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.
29 Replies
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!
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.
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.
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.
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.
*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.
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!
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.
Thanks, Christopher! I've grabbed your case submission as well. I'll have a look and connect your sample to our documentation. I'll follow up with you soon!
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.
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.
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
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!