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

https://user-images.githubusercontent.com/49612/228313558-f365b4ef-c10e-4e89-8675-d87690df5461.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 :)

[ingvarch]

Thanks, @gingerbeardman - this works great!

[CatalystM47]

thank you @gingerbeardman !! No one in Korea knew about this problem around me, but I'm happy that a developer came out and helped me

[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 https://github.com/uetchy/Polyglot/issues/128#issuecomment-1487229870

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