Workaround: pop-up disappears in Safari 16.4

Question

Workaround: pop-up disappears in Safari 16.4

sotnikov-nk opened this issue 2 years ago · 43 comments

sotnikov-nk commented 2 years ago

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

Answer 1 · 2023-03-21T21:43:38.000Z

Could be a Safari bug since 16.4 is still beta?

Answer 2 · 2023-03-22T16:00:47.000Z

unfortunately i don't thinks developers update this app anymore

Answer 3 · 2023-03-22T16:09:34.000Z

I'm a collaborator developer.

It will be updated if required.

Answer 4 · 2023-03-22T18:53:27.000Z

i'm glad to hear that!

Answer 5 · 2023-03-27T21:49:39.000Z

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

Answer 6 · 2023-03-27T22:44:33.000Z

Looking into this now.

Answer 7 · 2023-03-28T14:29:41.000Z

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

Answer 8 · 2023-03-28T16:18:21.000Z

cc @idhun90

OK, here's a temporary workaround.

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

Workaround

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 */
}

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

Answer 9 · 2023-03-28T18:19:06.000Z

is working, but we need update for app

and what translation services polyglot is using?

Answer 10 · 2023-03-28T18:25:38.000Z

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

Answer 11 · 2023-03-28T18:54:38.000Z

@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.

Answer 12 · 2023-03-28T19:39:36.000Z

is work perfectly everywhere now
thank you! @gingerbeardman

Answer 13 · 2023-03-28T19:53:27.000Z

@gingerbeardman

New version works on all sites.

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

Answer 14 · 2023-03-29T14:45:33.000Z

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.

Answer 15 · 2023-03-29T14:52:44.000Z

@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

Answer 16 · 2023-03-30T10:16:03.000Z

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!

Answer 17 · 2023-03-30T11:18:31.000Z

Great! Thanks a lot! @gingerbeardman

Answer 18 · 2023-04-14T19:47:53.000Z

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

Answer 19 · 2023-04-14T20:04:54.000Z

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

Answer 20 · 2023-05-05T10:27:05.000Z

Thanks, @gingerbeardman - this works great!

Answer 21 · 2023-05-08T05:35:12.000Z

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

Answer 22 · 2023-05-12T10:04:41.000Z

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.

Answer 23 · 2023-05-12T11:29:11.000Z

@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. ❤️

Answer 24 · 2023-05-13T00:51:33.000Z

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

Answer 25 · 2023-05-19T03:35:02.000Z

@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.

Answer 26 · 2023-05-19T03:37:34.000Z

@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

Answer 27 · 2023-05-19T03:46:46.000Z

@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.

Answer 28 · 2023-05-19T03:53:19.000Z

@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 :)

Answer 29 · 2023-05-19T12:58:22.000Z

@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:

open web inspector
select some text to trigger Polyglot panel
find polyglot__panel
select the item in the html
screenshot including the CSS in the side

here is an example

Answer 30 · 2023-05-19T13:02:54.000Z

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;
}

Answer 31 · 2023-05-19T14:16:13.000Z

@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. 👍

Answer 32 · 2023-05-22T07:24:23.000Z

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

Answer 33 · 2023-05-23T23:55:00.000Z

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

Answer 34 · 2023-05-24T00:19:21.000Z

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

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

Answer 35 · 2023-05-24T13:31:30.000Z

@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?

Answer 36 · 2023-05-24T13:53:01.000Z

@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.

Answer 37 · 2023-05-24T18:29:04.000Z

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.

Answer 38 · 2023-06-18T07:05:55.000Z

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

Answer 39 · 2023-06-18T13:54:26.000Z

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).

Answer 40 · 2023-09-25T09:51:31.000Z

@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.

Answer 41 · 2023-09-25T12:21:51.000Z

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!

Answer 42 · 2023-09-25T12:23:10.000Z

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

Answer 43 · 2023-09-25T12:27:32.000Z

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/