Missing one pixel on rectangle in Chrome

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 -- Thanks for reaching out! May I ask if you are finding the same behavior in other browsers and environments or is this isolated only to Chrome? And may I ask if you have tried importing the file into a new file or have you gone through the troubleshooting steps listed here to see if you find improvement? 

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.

Alyssa Gomez

Hi Jon, 

Thanks for reaching out here. This is still an open issue in the hands of our QA team. Unfortunately I don't have a timeframe for a solution at this point. However, one workaround that I don't see mentioned in this thread is to insert a shape behind the image and group them together. Would that work for you?

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.

Leslie McKerchie

Hey Jim,

Thanks for reaching out to share what you are experiencing. 

This issue is still open with our team. I wanted to share some information on how we define bugs and how we tackle them when they occur.

I do see a workaround listed:

  • Insert a shape behind the image and group them, such as a Frame Shape