Contact label upside down in Firefox

Yep, this is happening on two sites I’ve used this plugin (where the popup tab is placed vertically at the side). I just noticed it today – it was working fine a couple of weeks ago. The plugin hasn’t been updated in over a year so it looks like a recent Firefox update has broken it.

As Firefox and Chrome handle CSS transforms differently we’ll need to use a fix which only targets Firefox. Add this line to your theme’s custom CSS:

.sticky-popup span.popup-title { -moz-transform: none; }

If you use an image on the tab then that’ll also need fixed… I’m still working on that. You can try using <img src='www.url.com/image.png'> in the Popup Title field on the settings page, just be careful – don’t use double quotes (“) as they’ll break the form field and you’ll need to restore a database backup or go into PHPMyAdmin and fix it manually…

Well I ended up having to style the Popup Title image differently for Firefox than all other browsers. I also removed <div class="popup-image"> from class-sticky-popup.php and added class="popup-hamburger" to the <img> tag directly. The code isn’t pretty but it works for me.

Firefox is treating the popup tab as if the elements are stacked vertically within it, and all other browsers are treating the elements as if they are aligned horizontally and rotated 90 deg…

All browsers:

.sticky-popup .popup-hamburger { transform: rotate(90deg); margin-left: 15px; width: 80%; }
.sticky-popup span.popup-title { font-size: 13pt; letter-spacing: -0.4px; width: 26px; }

Firefox only:

@-moz-document url-prefix() {
	.sticky-popup .popup-hamburger, .sticky-popup span.popup-title  { transform: none; }
	.sticky-popup .popup-hamburger { margin-top: 15px; margin-left: 0;  width: 90%;}
}

Hello,

thank you maushawk

– the firefox fix .sticky-popup span.popup-title { -moz-transform: none; } is working for me, for chrome and safari it worked in first place but the same issue remain for edge and internet explorer – that text it is not displayed right, for edge – it is the same problem as firefox the test in horisontal instead vertical – , and in internet explorer the text is vertical but it is not centered in that “label” item in the background, it is exceed the exterior limit of it in the right side (position of the label is left side of the page)

– i have to mention that trying to place a picture in that URL instead the text option it is not working for me…

please help me to fix it , thank you!

Also having this issue and the .sticky-popup span.popup-title { -moz-transform: none; } did NOT work for me. ??

https://www.sharedimaging.com

lindsaycoats,

I see that you got it fixed on your website. Can you explain what you did?
the firefox fix .sticky-popup span.popup-title { -moz-transform: none; } works for firefox, but not for chrome.

Hope to hear from you.
With kind regards,
Maarten

Added this to the custom CSS and it’s ok now in Edge, Chrome and Firefox.

Hope it helps.

.sticky-popup span.popup-title{ -webkit-transform: rotate(0deg) !important;
padding-left: 0px !important;
}
.sticky-popup span.popup-title { -moz-transform: none; }

Update –
On mobile devices. the code will not turn the text 90 deg.
It will show it outsite the box.

Sorry I actually decided to pay my programmer to figure this out for me. I’m not sure what his solution was.

Not sure if its related, but something occurred over the last couple of days that screwed up my rotation using the right-aligned tab. Instead of turning 90 degrees, my text turned 180 degrees in Firefox, Chrome and Edge, while Safari and mobile worked fine.

A week ago, everything was fine, so I don’t know what happened. The Firefox fix worked for Firefox, Chrome and Edge. I added a media query to it so mobile devices weren’t affected, but trying to separate Safari desktop from mobile proved to be more of a hassle than it was worth, and I ended up just using a right-bottom tab instead.

Just thought I’d mention in case its related.