Canvas Support

Problem Migrating to Canvas5.1 (Bootstrap4) : images/texts/shapes are blurry

4 replies · opened Apr 7, 2018

CCrohmApr 7, 2018

Hello,

I am doing the migration from Canvas v4.5.1 to Canvas v5.1 (with Bootstrap4).

I have followed the explaination on changelog page and read Bootstrap4 new features to get ready, but I still have a problem I don't understand that look like a regression (maybe due to flexbox use in Bootstrap4 ?).

My problem occurs with Canvas5.1 on the top right of my page (see the screenshot), just under the header :
http://test.wedding-table-plan.com/
(login: canvas / password: canvas)

Here, you can see that all the content of my carousel is blurry (images contours, image text, and even the border and the text of the pink circle are blurred).

Whereas, with Canvas4.5.1, there is not this problem and all is very clear :
http://test.wedding-table-plan.com/index-before.php

I really don't understand what is causing this regression and I hope you will be able to help me with this :)
Thank you very much.

CCrohmApr 7, 2018

Here is the screenshot.

SSemicolon WebSTAFFApr 9, 2018

Hello,

We are not exactly sure why there is an issue with this since Flexbox is more flexible and customizable than the previous CSS. Please consider adding the following CSS Code as it should help fixing this issue: 

.owl-item img {
	-webkit-backface-visibility: hidden;
	-ms-transform: translateZ(0); /* IE 9 */
	-webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
	transform: translateZ(0);
}

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

CCrohmApr 9, 2018

Thank you very much ! It's a lot better ! But I don't really get what was the problem ? Was Chrome rendering the carousel images like "far away" on the Z axis ? And so, your code has just permit to put it "close to the screen" ?

On Chrome, there is still a problem I can't figure out how to fix : on the same carousel, the big image on the left has contours a bit blurred whereas contours are very clear with Canvas v4.5.1.

Do you know what could cause that and how to avoid it ?

Current version (Canvas5.1) with your CSS fix but where image has still blurred contours :
http://test.wedding-table-plan.com/
(login: canvas / pass: canvas)

Previous version (Canvas4.5.1) where the same image has very clear contours :
http://test.wedding-table-plan.com/index-before.php

Thank you very much.

SSemicolon WebSTAFFApr 12, 2018

Hello,

We suspect this might be because of the Flexbox as it calculates the width in a different way. The image appears to be slightly squished on the Newer Version. We would recommend you to use a Larger Image resolution to tackle this issue.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard