Skip to content

Ensure TouchHitTarget element is server side rendered with hit slop #15385

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 10 commits into from
May 6, 2019
Merged

Ensure TouchHitTarget element is server side rendered with hit slop #15385

merged 10 commits into from
May 6, 2019

Conversation

trueadm
Copy link
Contributor

@trueadm trueadm commented Apr 11, 2019 •
edited
Loading

This is a follow up to #15381, specifically @sebmarkbage's comment regarding the mismatch in the missing hit target element and the usage of pointer-events: none. This now re-applies the hit slop element and its hit slop properties, with the addition of making pointer-events: none so they get excluded in hit target calculations till after hydration has completed. This should hopefully reduce the amount of reflows to the DOM too.

To get hydration updates for TouchHitTarget a special hydrateTouchHitTarget prop gets passed around, otherwise ReactDOM doesn't correctly set pointer-events to auto after.

@trueadm trueadm requested a review from sebmarkbage April 11, 2019 18:03
@trueadm trueadm requested a review from necolas April 11, 2019 19:04
@sizebot
Copy link

sizebot commented Apr 11, 2019 •
edited
Loading

ReactDOM: size: 0.0%, gzip: 0.0%

Details of bundled changes.

Comparing: d1f667a...851673e

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.development.js 0.0% 0.0% 818.38 KB 818.68 KB 186.36 KB 186.45 KB UMD_DEV
react-dom.production.min.js 0.0% 0.0% 103.68 KB 103.7 KB 33.69 KB 33.7 KB UMD_PROD
react-dom.profiling.min.js 0.0% 0.0% 106.83 KB 106.85 KB 34.67 KB 34.69 KB UMD_PROFILING
react-dom.development.js 0.0% 0.0% 812.86 KB 813.17 KB 184.82 KB 184.9 KB NODE_DEV
react-dom.production.min.js 0.0% 0.0% 103.67 KB 103.7 KB 33.13 KB 33.15 KB NODE_PROD
react-dom.profiling.min.js 0.0% 0.0% 107 KB 107.02 KB 33.98 KB 33.99 KB NODE_PROFILING
ReactDOM-dev.js 0.0% +0.1% 837.34 KB 837.66 KB 186.27 KB 186.38 KB FB_WWW_DEV
ReactDOM-prod.js 🔺+0.1% 🔺+0.1% 344.23 KB 344.52 KB 63.67 KB 63.76 KB FB_WWW_PROD
ReactDOM-profiling.js +0.1% +0.1% 349.63 KB 349.9 KB 64.65 KB 64.74 KB FB_WWW_PROFILING
react-dom-unstable-fire.development.js 0.0% 0.0% 818.7 KB 819.01 KB 186.5 KB 186.59 KB UMD_DEV
react-dom-unstable-fire.production.min.js 0.0% 0.0% 103.69 KB 103.71 KB 33.7 KB 33.71 KB UMD_PROD
react-dom-unstable-fire.profiling.min.js 0.0% 0.0% 106.84 KB 106.86 KB 34.68 KB 34.69 KB UMD_PROFILING
react-dom-unstable-fire.development.js 0.0% 0.0% 813.18 KB 813.49 KB 184.95 KB 185.04 KB NODE_DEV
react-dom-unstable-fire.production.min.js 0.0% 0.0% 103.69 KB 103.71 KB 33.14 KB 33.16 KB NODE_PROD
react-dom-unstable-fire.profiling.min.js 0.0% 0.0% 107.01 KB 107.04 KB 33.99 KB 34 KB NODE_PROFILING
ReactFire-dev.js 0.0% +0.1% 836.53 KB 836.84 KB 186.23 KB 186.33 KB FB_WWW_DEV
ReactFire-prod.js 🔺+0.1% 🔺+0.2% 332.23 KB 332.51 KB 61.26 KB 61.35 KB FB_WWW_PROD
ReactFire-profiling.js +0.1% +0.1% 337.59 KB 337.86 KB 62.23 KB 62.31 KB FB_WWW_PROFILING
react-dom-test-utils.development.js 0.0% 0.0% 54.23 KB 54.23 KB 14.98 KB 14.98 KB UMD_DEV
react-dom-test-utils.production.min.js 0.0% 🔺+0.1% 10.56 KB 10.56 KB 3.89 KB 3.9 KB UMD_PROD
react-dom-test-utils.production.min.js 0.0% 0.0% 10.35 KB 10.35 KB 3.82 KB 3.82 KB NODE_PROD
react-dom-unstable-native-dependencies.development.js 0.0% 0.0% 60.76 KB 60.76 KB 15.85 KB 15.85 KB UMD_DEV
react-dom-unstable-native-dependencies.production.min.js 0.0% 0.0% 10.69 KB 10.69 KB 3.67 KB 3.67 KB UMD_PROD
react-dom-unstable-native-dependencies.development.js 0.0% 0.0% 60.43 KB 60.43 KB 15.72 KB 15.72 KB NODE_DEV
react-dom-unstable-native-dependencies.production.min.js 0.0% 0.0% 10.43 KB 10.43 KB 3.56 KB 3.57 KB NODE_PROD
react-dom-server.browser.development.js +0.2% +0.2% 136.5 KB 136.73 KB 35.93 KB 35.99 KB UMD_DEV
react-dom-server.browser.production.min.js 🔺+0.1% 🔺+0.2% 19.12 KB 19.14 KB 7.21 KB 7.22 KB UMD_PROD
react-dom-server.browser.development.js +0.2% +0.2% 132.63 KB 132.86 KB 34.99 KB 35.05 KB NODE_DEV
react-dom-server.browser.production.min.js 🔺+0.1% 🔺+0.2% 19.04 KB 19.07 KB 7.2 KB 7.21 KB NODE_PROD
ReactDOMServer-dev.js +0.3% +0.2% 134.79 KB 135.21 KB 34.63 KB 34.71 KB FB_WWW_DEV
ReactDOMServer-prod.js 🔺+2.0% 🔺+2.0% 46.91 KB 47.85 KB 10.77 KB 10.98 KB FB_WWW_PROD
react-dom-server.node.development.js +0.2% +0.2% 134.57 KB 134.81 KB 35.54 KB 35.6 KB NODE_DEV
react-dom-server.node.production.min.js 🔺+0.1% 🔺+0.2% 19.91 KB 19.93 KB 7.5 KB 7.51 KB NODE_PROD
react-dom-unstable-fizz.browser.development.js 0.0% +0.1% 3.66 KB 3.66 KB 1.45 KB 1.45 KB UMD_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.1% 1.21 KB 1.21 KB 705 B 706 B UMD_PROD
react-dom-unstable-fizz.browser.development.js 0.0% +0.1% 3.49 KB 3.49 KB 1.41 KB 1.41 KB NODE_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.2% 1.05 KB 1.05 KB 636 B 637 B NODE_PROD
react-dom-unstable-fizz.node.development.js 0.0% +0.1% 3.74 KB 3.74 KB 1.43 KB 1.43 KB NODE_DEV
react-dom-unstable-fizz.node.production.min.js 0.0% 🔺+0.2% 1.1 KB 1.1 KB 666 B 667 B NODE_PROD

Generated by 🚫 dangerJS

@trueadm trueadm changed the title Ensure TouchHitTarget element is server-side-renderer Ensure TouchHitTarget element is server side rendered with hit slop Apr 11, 2019
necolas
necolas reviewed Apr 19, 2019
View reviewed changes
@trueadm
Copy link
Contributor Author

trueadm commented Apr 25, 2019

@necolas @sebmarkbage Would be good to get another review on this PR when you both have time.

@trueadm trueadm merged commit d38cfd4 into facebook:master May 6, 2019
@trueadm trueadm deleted the ssr-revision branch May 6, 2019 19:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@necolas necolas necolas approved these changes

@sebmarkbage sebmarkbage Awaiting requested review from sebmarkbage

Assignees
No one assigned
Labels
CLA Signed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@trueadm @sizebot @sebmarkbage @necolas @facebook-github-bot