Fix CSS rendering bug when using startInLoadingState #612
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Titozzz
approved these changes
Jun 2, 2019
react-native-community-bot
pushed a commit
that referenced
this pull request
Jun 2, 2019
# [6.2.0](v6.1.1...v6.2.0) (2019-06-02) ### Features * **loading:** Changed loading/error rendering ([#612](#612)) ([d429e82](d429e82))
|
🎉 This PR is included in version 6.2.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Titozzz
pushed a commit
that referenced
this pull request
Jun 2, 2019
phuongwd
pushed a commit
to phuongwd/react-native-webview
that referenced
this pull request
Apr 29, 2020
phuongwd
pushed a commit
to phuongwd/react-native-webview
that referenced
this pull request
Apr 29, 2020
# [6.2.0](react-native-webview/react-native-webview@v6.1.1...v6.2.0) (2019-06-02) ### Features * **loading:** Changed loading/error rendering ([react-native-webview#612](react-native-webview#612)) ([d429e82](react-native-webview@d429e82))
noproblem23
added a commit
to noproblem23/react-native-webview
that referenced
this pull request
Apr 18, 2023
# [6.2.0](react-native-webview/react-native-webview@v6.1.1...v6.2.0) (2019-06-02) ### Features * **loading:** Changed loading/error rendering ([#612](react-native-webview/react-native-webview#612)) ([d429e82](react-native-webview/react-native-webview@d429e82))
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I am using react-native-weview on an app, and it works very well. But, when I introduced a custom loading screen, I noticed a very odd bug in the application of CSS to the webpage inside the webview. This is best explained via screenshots:
Before using
startInLoadingState={true}After using
startInLoadingState={true}Notice that the bar at the bottom of the webview has a blur effect in the first screenshot, but no blur effect in the second screenshot. The css applied to the underlying site has not changed. To reproduce, load a webpage in the webview with an element that has
-webkit-backdrop-filter: blur(20px);and something colorful behind it (so you can see the blur effect). The URL of the page in the screenshot ishttps://review.discourse.org.The source of the issue is that when using
startInLoadingState={true}, the webview initially is hidden (width: 0; flex: 0) and then shown, and this trips up the renderer. Switching to positioning the loading/error views absolutely fixes the issue.The styles for the error view and loading view are identical, so this PR merges them into one
loadingOrErrorViewstyle.