CSS content tab

Hi,

I added some CSS to style a content tab and I think that my CCS can be improved.
Why? Because when opening the page, elements loads very slowly and this is not beautiful at all. We can see the elements moving and taking place.
See video link

Here is the CSS I used:

.vc_tta-panel-body {
text-align: center;
}
.vc_tta-panel-body .menu-price-title {
font-size: 14px;
font-weight: 300;
}
.vc_tta-tabs-list .vc_tta-title-text {
font-size: 14px;
line-height: 1.4;
font-weight: 300;
}
.vc_tta-panel-body .menu-price-details {
font-size: 14px;
font-weight: 300;
font-style: normal;
}

Thanks for the help!

Hello,

I watched the video you added. This is not our theme issue and not the CSS issue.

This is because when the browser loads the page, it reads the HTML document from the top to the bottom, from the left to the right. When reading the HTML document, the browser would have read the whole DOM before reaching your CSS and JS scripts and executing them.

The Rendering engine:

The responsibility of the rendering engine as well… Rendering, that is the display of the requested contents on the browser screen. By default, the rendering engine can display HTML and XML documents and images. It can display other types of data via plug-ins or extensions; for example, displaying PDF documents using a PDF viewer plug-in. However, in this chapter we will focus on the main use case: displaying HTML and images that are formatted using CSS.

Rendering engines:

Different browsers use different rendering engines: Internet Explorer uses Trident, Firefox uses Gecko, Safari uses WebKit. Chrome and Opera (from version 15) use Blink, a fork of WebKit.

So this only happens because of the Browser Rendering. To avoid it you have to use Cache on your site.

Hope this is all clear now.

Best Regards.

[Author]

Posts