Gutenberg: Safari: Missing pre-publish panel, block movers

[mcsf]

In macOS Safari (13.0), the following are no longer visible:

• block movers for the selected block
• all of the pre-publish panel that should be displayed when pressing _Publish…_

Firefox|Safari
-|-
|
|

Observations

• The two issues may be distinct, but they struck me as unusual enough in nature and timing that I reported them as one.
• The elements are invisible, but not gone.
  
  
  
  • In the case of the block movers, I can still move my cursor to where the movers should be, and a tooltip will appear, and I can click in that region to still move the blocks.
  
  
  • In the case of the pre-publish panel, a very quick look in dev tools suggested the panel was misplaced, but somewhere in the page.
  
  

Additional context

Below are my browser's enabled and disabled experimental features:

[HardeepAsrani]

Seems to work just fine.

Couldn't understand the first issue properly but I'm able to move the blocks around in Safari if multiple blocks exist.

[mcsf]

I don't think there's anything particular with my setup, but I've added the _Needs Testing_ label just in case I'm the only one who seems to experience this.

[ellatrix]

I have the same problem.

[ellatrix]

@HardeepAsrani I don't see any block movers in your recording.

[HardeepAsrani]

I didn’t notice that issue when recording the gif and only focused on
pre-published panel. But checked later and the moving controls were there
if more than one block was in the editor.

On Tue, 24 Sep 2019 at 3:08 PM, Ella van Durpe [e-mail]
wrote:

@HardeepAsrani https://github.com/HardeepAsrani I don't see any block
movers in your recording.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/WordPress/gutenberg/issues/17534?email_source=notifications&email_token=AAUG6LZW6XK7FBAVRTSNBADQLHNYBA5CNFSM4IZS4MY2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7NX7CY#issuecomment-534478731,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAUG6L3ER43OPY77ZTBRJMTQLHNYBANCNFSM4IZS4MYQ
.

>

Regards,
Hardeep Asrani

[mapk]

I just tested, and the Prepublish checklist showed just fine for me in Safari 13.0. I can also see the block movers when selecting a block.

[mapk]

And here are the block movers in Safari.

[ellatrix]

When inspecting the element, I see opacity at 0 as an active rule. It seems like the animation is not working to fade it in?

[jasmussen]

@ellatrix

When inspecting the element, I see opacity at 0 as an active rule. It seems like the animation is not working to fade it in?

Do you have any kind of "reduce motion" turned on on your system?

Just for shotgun-debugging purposes (because I can't reproduce this myself), can you try and comment out this mixin and see if it changes anything?

@mixin reduce-motion($property: "") {

    @if $property == "transition" {
        @media (prefers-reduced-motion: reduce) {
            transition-duration: 0s;
        }
    }

    @else if $property == "animation" {
        @media (prefers-reduced-motion: reduce) {
            animation-duration: 1ms;
        }
    }

    @else {
        @media (prefers-reduced-motion: reduce) {
            transition-duration: 0s;
            animation-duration: 1ms;
        }
    }

}

Separate note, Safari 13.0.1 just came out. It doesn't make a difference for me, but just in case it does for you maybe worth a try.

[ellatrix]

@jasmussen I don't have reduced motion set. Tried commenting out the code you shared, but that didn't change anything. Since the opacity stays at 0, I have a feeling that there is a problem with the edit-post__fade-in-animation keyframes.

[ellatrix]

Updated to Safari Version 13.0.1 (14608.2.11.1.11), and the movers still aren't there.

[draganescu]

I also tested and for me with Safari Version 13.0 (14608.1.49) the movers and pre publish panel both show up.

Just in case, I did go to Develop > Experimental .. and click on reset to default before.

[youknowriad]

Ok, I found the problem. It comes from the "Disable CSS animations" plugin we use in e2e tests. This is a good news because it means it's just a dev environment problem. Triggering the "reduce animation" preference use a similar technique to disable the animations but it works better (no issues), so we can probably use a similar technique in the plugin too.

This also means this is not high-priority anymore but still good to fix.

[mcsf]

Ok, I found the problem. It comes from the "Disable CSS animations" plugin

Oh, man. 😅

This also means this is not high-priority anymore but still good to fix.

I would even say the present issue is "fixed" and we should open two subsequent ones:

• Improve the _Disables the CSS animations_ E2E plugin
• Make sure it's properly activated and deactivated, like the rest of our E2E plugins.