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

Safari Bugfix: Caption jumps when hovering resize handles #24540

Merged
merged 1 commit into from
Aug 14, 2020

Conversation

jasmussen
Copy link
Contributor

Fixes #15924.

There's a frustrating bug in Safari, not fixed in v14, which is tracked here: https://bugs.webkit.org/show_bug.cgi?id=187903

When you hover the resize handle of an image with a caption, the caption travels down the page:

safari before

The precise cause is a little elusive, but it appears to be related to the table-caption property used for the image caption, combined with the image itself reiving an animation and/or a transform.

This PR takes the smallest route I could think of, to improve the situation: it simplpy disables the animation in Safari using a hack documented with a comment. Safari after:

safari after

Chrome and other blink browsers are unchanged, same with Firefox. Here's Chrome:

chrome before and after

I wish there was a better and still small fix, but I was unable to find one. Ideally this gets fixed in Safar 15, and we can remove the hack. An alternate approach is to revisit the Image block and how captions are treated, but that is a nontrivial project.

@jasmussen jasmussen added [Type] Bug An existing feature does not function as intended Needs Design Feedback Needs general design feedback. Browser Issues Issues or PRs that are related to browser specific problems labels Aug 13, 2020
@jasmussen jasmussen self-assigned this Aug 13, 2020
@github-actions
Copy link

Size Change: +111 B (0%)

Total Size: 1.16 MB

Filename Size Change
build/components/style-rtl.css 15.7 kB +55 B (0%)
build/components/style.css 15.7 kB +56 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.44 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.97 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-editor/index.js 125 kB 0 B
build/block-editor/style-rtl.css 10.6 kB 0 B
build/block-editor/style.css 10.6 kB 0 B
build/block-library/editor-rtl.css 8.36 kB 0 B
build/block-library/editor.css 8.36 kB 0 B
build/block-library/index.js 132 kB 0 B
build/block-library/style-rtl.css 7.49 kB 0 B
build/block-library/style.css 7.49 kB 0 B
build/block-library/theme-rtl.css 729 B 0 B
build/block-library/theme.css 730 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.4 kB 0 B
build/components/index.js 200 kB 0 B
build/compose/index.js 9.68 kB 0 B
build/core-data/index.js 11.8 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.45 kB 0 B
build/date/index.js 5.38 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.23 kB 0 B
build/edit-navigation/index.js 10.9 kB 0 B
build/edit-navigation/style-rtl.css 1.08 kB 0 B
build/edit-navigation/style.css 1.08 kB 0 B
build/edit-post/index.js 304 kB 0 B
build/edit-post/style-rtl.css 5.63 kB 0 B
build/edit-post/style.css 5.63 kB 0 B
build/edit-site/index.js 17 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/index.js 11.7 kB 0 B
build/edit-widgets/style-rtl.css 2.45 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/index.js 45.3 kB 0 B
build/editor/style-rtl.css 3.8 kB 0 B
build/editor/style.css 3.79 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.72 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.11 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.33 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.71 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

Copy link
Contributor

@talldan talldan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like a good trade-off, great work on finally fixing this one 🎉

@jasmussen jasmussen merged commit a67cf2e into master Aug 14, 2020
@jasmussen jasmussen deleted the try/safari-handle-fix branch August 14, 2020 08:04
@github-actions github-actions bot added this to the Gutenberg 8.8 milestone Aug 14, 2020
@kjellr
Copy link
Contributor

kjellr commented Aug 14, 2020

@jasmussen you are my hero. 🙌 Thanks for sorting this out this longstanding bug!

@jasmussen
Copy link
Contributor Author

My pleasure Kjell! I only wish there was a nicer workaround.

I will keep Safari and the Image block in mind. The current configuration only just strikes the balance between making the caption behave predictably while keeping the markup pure, but it'd be nice if there was a better way overall.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Browser Issues Issues or PRs that are related to browser specific problems Needs Design Feedback Needs general design feedback. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Image block captions disappear offscreen when mousing over resize handles (in Safari)
3 participants