Pricing table button text styling deprecates when inside a Tab element

Support
#1

I’m creating a pricing table inside a tab so people can click on the tab to see the different pricing plans. However, in Safari the button’s text gets thinner (hard to read) when the pricing table’s button is inside a tab compared to the text thickness when the pricing table is not in a tab. It appears fine in Chrome.

How to make the button text styling in Safari be consistent regardless of whether the pricing table is in a tab or not?

#2

Hi there,

I checked your website and that is not the case for me. I use Mac Scierra with the latest version of Safari.

Chrome:

Safari:

Uploading…

Maybe it is a problem of Font Smoothing for your case but I am not sure. Please kindly add the code below to X > Launch > Options > CSS:

.x-pricing-column .x-li-icon {
	-webkit-font-smoothing:  auto;
}

If you still have problems kindly check the website with other machines.

Thank you.

#3

Unfortunately that did not work. Tried on Windows, too. Didn’t look correct there either.

#4

Hi there,

I am not sure if the code below will work or not, I did try to find out what may cause the difference of styling in the button while in the tab element. As I can not reproduce the problem I can not see it live to be able to test.

Please kindly add the code below to X > Launch > Options > CSS:

.x-tab-content .x-btn {
-webkit-transform: none;
transform: none;	
}

Thank you.

#5

This code definitely helped make it look better in Safari, but it’s still not the same thickness as in Chrome. Page is contentclipper.com/pricing

#6

Hi there,

Please try the combination

.x-tab-content .x-btn {
-webkit-transform: none;
transform: none;	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
text-shadow: none;
}

You may try different values for font smoothing to get your preferred look ( https://davidwalsh.name/font-smoothing )

Thanks!