Missing one pixel on rectangle in Chrome

Jun 03, 2016

I drawed a small rectangle (12 x 12) with a solid border of 2 pixels. The Cap type is set to Square and the Join type to Miter. In HTML (SWF) it looks ok, but in HTML5, there is one pixel top left missing.

I tried other settings.

Perhaps using an image instead of a Storyline shape is an option, but then we cannot use theme colors.

16 Replies
Christie Pollick

Hi, Chris -- Once more, your patience is appreciated while I took a look at your file via tempshare.articulate.com, and yes, I am seeing that the Cap Type: Square, Join Type: Miter is functioning properly in HTML (SWF), but there is that one missing pixel in the HTML5 version. 

I'd like to recommend that you work with your Support Engineers for deeper technical insights, so I will be setting you up in a case momentarily. A confirmation email should reach you in just a matter of minutes! 

Christie Pollick

Hi, Chris -- I checked in on your case and it appears that the following was suggested by one of our engineers:

"I was able to replicate the issue you reported. This appears to happen not only to shapes but also to image borders. I have submitted your case to our Quality Assurance team for further investigation. 

As a workaround, you can try any of the following - 

Option 1: Use another shape such as Frame (http://d.pr/I6Qh/1gTX24tV). 

Option 2: change the “Compound Type” to another type such as Thick Thin. The edges may appear less clear but the upper border won’t appear cut-off in HTML5 output."

I wanted to be sure to share that for anyone else who may be following along here seeking assistance

Jon Stepro

Hi. I have seen this border issue when viewing the HTML5 version of our published files. We use shapes with no fill and border to add emphasis to some of our slides. It does not seem to matter what type of Join is selected. Round, Bevel, Miter.

When there is a chunk missing it can make users believe there is an error on our end. I am attaching a screenshot of a recent test file rendered in HTML5. Any word on a fix? Thanks. Jon.

Jon Stepro

Hi Alyssa. Thanks for the response.

Perhaps I should explain further. Let's say I have a large photo on a slide and I simply want to draw a square shape (with no fill) and create a border to indicate I want the viewer to focus on a particular point. We sometimes have to do this to emphasize a portion of a photo and the square corner shape is often used. I will attach a screenshot. So, it is not simply a border for a photo. Anyway, hope this helps explain. Thanks again.

Jon Stepro

By the way, after doing some testing, I think the chunk out of the border issue might be a size or scale issue of the object on which the border is applied. In the attached png, I applied a border to a photo. I then made 3 copies on the slide and scaled them. When I made the photo larger than 240 px square the border looked normal. Interesting result.

This discussion is closed. You can start a new discussion or contact Articulate Support.