Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Workaround: pop-up disappears in Safari 16.4 #128

Open
sotnikov-nk opened this issue Mar 21, 2023 · 43 comments · May be fixed by #130
Open

Workaround: pop-up disappears in Safari 16.4 #128

sotnikov-nk opened this issue Mar 21, 2023 · 43 comments · May be fixed by #130

Comments

@sotnikov-nk
Copy link

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
Copy link
Collaborator

Could be a Safari bug since 16.4 is still beta?

@SinaMombeiny
Copy link

unfortunately i don't thinks developers update this app anymore

@gingerbeardman
Copy link
Collaborator

I'm a collaborator developer.

It will be updated if required.

@SinaMombeiny
Copy link

i'm glad to hear that!

@gingerbeardman gingerbeardman changed the title Bug: Bug: pop-up disappears in Safari 16.4 beta Mar 22, 2023
@SinaMombeiny
Copy link

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

@gingerbeardman gingerbeardman changed the title Bug: pop-up disappears in Safari 16.4 beta Bug: pop-up disappears in Safari 16.4 Mar 27, 2023
@gingerbeardman
Copy link
Collaborator

Looking into this now.

@gingerbeardman
Copy link
Collaborator

gingerbeardman commented Mar 28, 2023

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
Copy link
Collaborator

gingerbeardman commented Mar 28, 2023

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 */
}
  1. save it somewhere you know, then pick the file from Safari Preferences > Advanced > Style sheet > Other...

Screen shot 2023-03-28 at 14 11 08

Results

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

@SinaMombeiny
Copy link

SinaMombeiny commented Mar 28, 2023

is working, but we need update for app

and what translation services polyglot is using?

@SinaMombeiny
Copy link

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

@gingerbeardman
Copy link
Collaborator

gingerbeardman commented Mar 28, 2023

@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

image

Twitter

image

YouTube

image

Note:

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

image

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

image

@SinaMombeiny
Copy link

is work perfectly everywhere now
thank you! @gingerbeardman

@sotnikov-nk
Copy link
Author

@gingerbeardman

New version works on all sites.

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

@gingerbeardman
Copy link
Collaborator

gingerbeardman commented Mar 29, 2023

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
Copy link
Collaborator

gingerbeardman commented Mar 29, 2023

@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
Copy link

oldmanofraidof commented Mar 30, 2023

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
Copy link

Great! Thanks a lot! @gingerbeardman

@Extravagangsta
Copy link

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

@gingerbeardman
Copy link
Collaborator

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

@rogerpro
Copy link

rogerpro commented May 12, 2023

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
Copy link
Collaborator

@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
Copy link

antomal commented May 13, 2023

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

@pilisir
Copy link

pilisir commented May 19, 2023

@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
Copy link

@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
Copy link

pilisir commented May 19, 2023

@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
Copy link

@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
Copy link
Collaborator

gingerbeardman commented May 19, 2023

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

@gingerbeardman
Copy link
Collaborator

gingerbeardman commented May 19, 2023

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
Copy link

pilisir commented May 19, 2023

@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
Copy link

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

@karlcow
Copy link

karlcow commented May 23, 2023

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

@gingerbeardman
Copy link
Collaborator

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

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

@gingerbeardman
Copy link
Collaborator

@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
Copy link

pilisir commented May 24, 2023

@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
Copy link
Collaborator

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.

@gingerbeardman gingerbeardman changed the title Bug: pop-up disappears in Safari 16.4 Bug: pop-up disappears in Safari 16.4 (workaround available) May 30, 2023
@gingerbeardman gingerbeardman changed the title Bug: pop-up disappears in Safari 16.4 (workaround available) Workaround: pop-up disappears in Safari 16.4 May 30, 2023
@cristibaluta
Copy link

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

@gingerbeardman
Copy link
Collaborator

gingerbeardman commented Jun 18, 2023

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
Copy link

ollyde commented Sep 25, 2023

@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
Copy link
Collaborator

gingerbeardman commented Sep 25, 2023

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
Copy link

ollyde commented Sep 25, 2023

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

@gingerbeardman
Copy link
Collaborator

gingerbeardman commented Sep 25, 2023

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.