Workaround: pop-up disappears in Safari 16.4

[sotnikov-nk]

Description

The pop-up with translation immediately disappears after appearing in Safari 16.4

To Reproduce

The bug occurs both when translating with shortcuts and when using instant translation.

Expected behavior

No response

Screenshots

No response

What's My Browser Link

https://www.whatsmybrowser.org/b/UKVT2

Polyglot Version

3.4.0

Additional context

No response

[gingerbeardman]

Could be a Safari bug since 16.4 is still beta?

[sinamombeiny]

unfortunately i don't thinks developers update this app anymore

[gingerbeardman]

I'm a collaborator developer.

It will be updated if required.

[sinamombeiny]

i'm glad to hear that!

[sinamombeiny]

That's right Polyglot is not working for Safari 16.4!

[gingerbeardman]

Looking into this now.

[gingerbeardman]

OK, I have fixed the issue in PR #130. I am trying to contact @uetchy to merge my fix.

Problem was Safari 16.4 is more strict about some invalid CSS used in the extension for the past 6 years (ref)

problem (previously ignored by WebKit/Safari)

#polyglot__panel {
	transform: scale(0) !important;
}

should be the more valid:

#polyglot__panel {
	transform: scale(1) !important;
}

Reported as WebKit bug 254590 and I feel they will correct this regression going forward.

Meanwhile:

• I will try to think of how to get the new version released (if an automatic upgrade is not possible)
• I will look to see if there is a temporary workaround using a user stylesheet done

[gingerbeardman]

cc @idhun90

OK, here's a temporary workaround.

Let me know if you find it not working on a particular page or site.

Workaround

1. create a file called polyglot.css with the below contents (or download and extract this one

div#polyglot__panel {
	transform: scale(1) !important; /* for Safari 16.4 issue */
	animation: none !important;  /* for Safari 16.5 issue */
}

2. save it somewhere you know, then pick the file from Safari Preferences > Advanced > Style sheet > Other...

Results

Screen.shot.2023-03-28.at.17.57.25.mov

[sinamombeiny]

is working, but we need update for app

and what translation services polyglot is using?

[sinamombeiny]

Update : is not working in discord, YouTube, Twitter and more
for me just working in github

[gingerbeardman]

@sinamombeiny

is working, but we need update for app

Yes, of course the app needs to be updated.
But we need to wait for @uetchy as only they can release a new official update.
Thank you for your patience.

and what translation services polyglot is using?

Google Translate, with its usage terms.

Update : is not working in discord, YouTube, Twitter and more

I made a small tweak to the contents of the CSS file, please check above and redo the CSS.

for me just working in github

New version works on all sites.

Discord

Twitter

YouTube

Note:

Please be aware that the translation popup does not always appear when you select text:

it only appears for words or phrases that return translation results.

[sinamombeiny]

is work perfectly everywhere now
thank you! @gingerbeardman

[sotnikov-nk]

@gingerbeardman

New version works on all sites.

I confirm that the new version works accurately on all sites. Thank you!

[gingerbeardman]

The issue causing this problem has been identified as a bug fix in WebKit.

But a remaining bug has been found which I believe should mean this issue should eventually go away when the fix reaches Safari.

[gingerbeardman]

@sotnikov-nk when you first reported this issue, had you installed Safari 16.4 beta alone, or did it come with a macOS beta that you installed? ah, I see you were on macOS 10.15.7 running Safari 16.4

[oldmanofraidof]

Just want to say a big tnx for fixing this issue, I did this "polyglot css" and seems that the translator is working as it should!

[genkiguan]

Great! Thanks a lot! @gingerbeardman

[Extravagangsta]

The workaround worked for me too. Thank you very much for supporting this extension. I appreciate you.

[gingerbeardman]

@Extravagangsta thank you - your comment made my day :)

[rogerpro]

Thousand thanks for your quick fix, @gingerbeardman 👏

I ❤️ Polyglot and it is an essential Safari extension for me that brings a big productivity.

From what I understand after a quick read of the CSS specs, scale(2) means to double the appearance, scale(1) to keep it as it is, and scale(0) make it disappear. If that is true, then, regardless of wether WebKit has been applying the rule strictly or not on the past, the proper solution is to use scale(1) in Polyglot, IMHO.

Your temporary workaround works as a charm ✅ However, for those who use different computers and accounts, it requires to set up this multiple times.

@uetchy did a great work creating Polyglot. It is a pity if he/she is not reachable, would you consider the possibility to publish a fork? The ideal would be to have a single Polyglot extension, but thinking on the future, that may be convenient in the case that other issues arise. Since it is published under the Apache License, Version 2.0, that looks possible.

PS: there is the author's email here. I will send them a message.

[gingerbeardman]

@rogerpro Even if some contributors approve my CSS change I think Uetchy would still need to publish to the App Store.

if Uetchy doesn't reply, or return, and Polyglot breaks again or is removed from the App Store, I'll create a fork.

It won't be able to replace the official version on the App Store, so it will still require people to find this page and download the new version.

I hope Uetchy is OK. ❤️

[antomal]

@gingerbeardman The CSS solution helped! Thank you Matt! 👏
I am also very ❤️ this extension. Have a good day!

[pilisir]

@gingerbeardman Hi, macOS 13.4 update did thing similar again 🥲, some pages (like this issue track) show an empty blurred box, until scrolling page it shows on, but in Reddit pages the float dialog design couldn't help.

https://imgur.com/ZgRX4fd

It might be caused by another css problem?
Thank you.

[CatalystM47]

@gingerbeardman Hi, macOS 13.4 update did thing similar again 🥲, some pages (like this issue track) show an empty blurred box, until scrolling page it shows on, but in Reddit pages the float dialog design couldn't help.

https://imgur.com/ZgRX4fd

It might be caused by another css problem? Thank you.

i got same problem. but i re import same css.
so i got solve that problem

do it css apply again

[pilisir]

@gingerbeardman Hi, macOS 13.4 update did thing similar again 🥲, some pages (like this issue track) show an empty blurred box, until scrolling page it shows on, but in Reddit pages the float dialog design couldn't help.
https://imgur.com/ZgRX4fd
It might be caused by another css problem? Thank you.

i got same problem. but i re import same css. so i got solve that problem

do it css apply again

Hi @CatalystM47 thx reply
I try "None Selected" first, and reboot, and select the css file once again, but no luck.

[CatalystM47]

@gingerbeardman Hi, macOS 13.4 update did thing similar again 🥲, some pages (like this issue track) show an empty blurred box, until scrolling page it shows on, but in Reddit pages the float dialog design couldn't help.
https://imgur.com/ZgRX4fd
It might be caused by another css problem? Thank you.

i got same problem. but i re import same css. so i got solve that problem
do it css apply again

Hi @CatalystM47 thx reply I try "None Selected" first, and reboot, and select the css file once again, but no luck.

oh...right? Im sorry to hear that..
we have to wait devleoper :)

[gingerbeardman]

@gingerbeardman Hi, macOS 13.4 update did thing similar again 🥲

I cannot reproduce. See rest of thread

I'm running:

• Safari 16.5
• Safari Tech Preview 170
• macOS 12.6.6 Monterey

But you can help me debug:

1. open web inspector
2. select some text to trigger Polyglot panel
3. find polyglot__panel
4. select the item in the html
5. screenshot including the CSS in the side

here is an example

[gingerbeardman]

Actually, I can reproduce it if I am careful. @pilisir

The panel can sometimes appear as blurred, but if I move the mouse or scroll the document it finally appears.

There is another problem! Reported as WebKit Bug#257023

try this polyglot.css same install process as detailed in #128 (comment)

div#polyglot__panel {
	transform: scale(1) !important;
	animation: none !important;
}

[pilisir]

@gingerbeardman thanks reply.

Here is my reproduce screenshot.

I try to add the new css property you provided, animation, and it seems to work.
I will keep eyes on it few days, thx a lot for help. 👍

UPDATE:
After 2 days, everything goes fine, thank you again. 👍

[eltonooi]

the workaround Is working on MacOS 13.3.1, Thanks a lot!

[karlcow]

@gingerbeardman let us know if you fork and publish a new extension. Thanks.

[gingerbeardman]

No immediate plans, but of course I'll let you know.

Currently trying to help WebKit team reproduce the 16.5 blurry bug.

[gingerbeardman]

@pilisir I am running without the blurry fix, and it is not currently happening for me. So, I'm wondering what situation triggers it? Do you have any steps that will guarantee reproducing the blurry popup?

[pilisir]

@gingerbeardman
Hi, in this issue post can 100% reproducing by my MacBook Pro 14 with 13.4, Safari 16.5. Besides, clicking to read some Reddit posts did as well.

[gingerbeardman]

I was able to reproduce it immediately in Safari Tech Preview after posting my earlier message. I'm not sure why WebKit people are unable to reproduce it.

[cristibaluta]

Is the owner still alive? The css works on Safari 16.5, perhaps someone could publish a new extension

[gingerbeardman]

Is the owner still alive?

it's a tough question I have thought about. We don't know, so... maybe.

The css works on Safari 16.5, perhaps someone could publish a new extension

It is probably the only way forward for long term future.

Maybe I will try to create a fork closer to macOS Sonoma release. If I was to do it, I would try to simplify the code so that it would not break, and also so that it does not rely on so many dependencies (which cause it to need updating regularly).

[ollyde]

@gingerbeardman

I followed the comments here. I can confirm that on Version 16.5.1 (18615.2.9.11.7) Safari it works but

It doesn't work when right clicking to translate the whole page, nothing happens.

[gingerbeardman]

It doesn't work when right clicking to translate the whole page, nothing happens.

@ollyde

Please let me know steps and I'll try to find a workaround.

I have never use full page translation via Polyglot!

[ollyde]

@gingerbeardman indeed, I never used highlighting translations since usually it's the whole page that is the language.

[gingerbeardman]

I use Safari built-in translate for full pages and sometimes an app extension called Myna Translate to translate whole pages. Even the free version works. https://macdownload.informer.com/myna-translate-for-safari/amp/