My Highlight Boxes are Skewed in Google Chrome

Report · Mar 25, 2016

Highlight boxes that are supposed to be straight appear skewed when viewed in Google Chrome. Here are some screenshots of the issue:

This is the problem, as seen in Google Chrome

But this is what it looks like in Internet Explorer

This is the box in Captivate. I added the red lines in Photoshop to check whether they were really straight or not. I have tried re-adding the highlight boxes, to see if I may have done something to cause the skew by accident, but they still turn out skewed in Chrome. Also, for the record, in the Properties > Options > Angle form, they are set at 0°. There is no rotation or twisting applied to these boxes, but I do have a "Zoom In" effect, as well as a "Fade in and Out" transition applied.

Has anyone seen this sort of thing happening before? Any ideas on how to fix it?

Report · Mar 25, 2016

In Google Chrome where you see them skewed, try pressing Ctrl+0 (Control + Zero) to reset the zoom to default.

Does that change things?

Cheers... Rick

Report · Mar 25, 2016

Thanks Rick,

Unfortunately, that doesn't seem to help.

Report · Mar 25, 2016

Well rats!

My hope was that it was some odd visual artifact resulting from zoom being set to a value other than 100%.

Shucky durn... Rick

Report · Mar 25, 2016

I think I've found the cause. When I remove the drop shadow from the highlight boxes, the skewing goes away.

Report · Mar 25, 2016

Further development:

I have noticed that this only seems to effect highlight boxes with a stroke width of 5. When I changed them to 4, the skewing goes away, even with the shadow enabled. I should also mention that these boxes have a 20% fill on the outside of the box. Not sure it is a factor, but just putting it out there.

Report · Mar 25, 2016

I would imagine it's some sort of CSS transform that's skewing the box. There are different transforms for different browsers, there in the CPM.js. Would be fairly difficult to find the exact culprit.

You could go through the Developer tools and check the html until you find the element and see it's properties, then look for that in the CPM.js.

Report · Mar 25, 2016

That sounds promising, but a bit above my pay-grade